How to replace text links of navigation menu with icons


Navigate to wp-dashboard > Appearance > Menus. If you have not created any menus, the theme locations will be empty (note, the Mobile Plugin navigation is not relevant for this tutorial).

menu

Create “Top Nav” menu and then by selecting posts/pages and categories create your Navigation menu. Create a custom link to your “home” page. Drag and drop the menu link to sort the order of the menu.

After saving the menu you will find the page like this:

after-menu

And in the frontend you’ll get this

before

Now to add a home icon instead of text, just write the following code in your style.css


#menu-main-menu {background:#0b2300;}
#menu-main-menu li {margin:0; padding:0;}
#menu-main-menu li a{padding:0 10px; color:#fff;}
#menu-main-menu li a:hover{background:#000; color:#fff;}
#menu-item-14 a{text-indent:-9999px; background:#000 url(images/home-button.png) center center no-repeat !important; width:30px;}
#menu-item-14 a:hover{text-indent:-9999px; background:#000 url(images/home-button-hover.png) center center no-repeat !important; width:30px;}

where #menu-item-14 is the id of the menu item, where I have to insert the Home icon.
after

And you’re all done !!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.