The new WordPress 3 navigation menus are an excellent tool to design your own menus, mixing pages, categories and custom links. iThemes created video tutorials on how to use the new WordPress navigation in Builder and Flexx theme. The following tutorial will show how you can replace the text links in the navigation menu with images. It can be used for any theme, on any WordPress site running WordPress 3+, but it is based on iThemes Flexx.
The Flexx theme, by design, uses graphical icons for the home page links, as can be seen in this theme demo. The WordPress 3 navigation won’t add these automatically.
In the following step by step guide, we will:
- create 2 menus, one for pages, one for categories
- create custom links to link to “home”
- integrate the menus in the WordPress layout
- figure out how we can address these links using CSS
- add the necessary css to make it all work
Getting Started
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).
Create 2 menus, one for pages, one for categories
Create a “pages” menu (in this case pagesnav3, but call it whatever you want), and a “categories” menu (catsnav3), by selecting all pages and all categories.
Create a custom link to your “home” page
Add the URL to your home page and create a custom link.
Add the custom link to the page menu and to the categories menu. By default, a new custom link will be added to the end of the menu. Drag and drop the menu link to the top of the list of navigation items.
Integrate the menus in the WordPress layout
Figure out how we can address these links using CSS
When you navigate to your site, you can now see that you have successfully added the home links, albeit still text links.
We need to find the unique menu item ID’s, assigned to each custom link. You can find instructions in a separate tutorial.
Add the necessary css to make it all work
Now that we know which ID (or ID’s, 165 and 166 in this case) we need to address in our CSS, we can add the appropriate CSS code to replace the text “home” with an image.
Add the following code to (the end of) your stylesheet.
#menu-item-165,
#menu-item-166 {
text-indent: -9999px;
width: 40px;
}
#menu-item-165 a,
#menu-item-166 a {
background: #0b2300 url(images/menu-home-bg.gif) top center no-repeat !important;
}
#menu-item-165 a:hover,
#menu-item-166 a:hover {
background: #0b2300 url(images/menu-home-active-bg.gif) top center no-repeat !important;
}
This code will make sure that:
- the text “Home” is indented (or rather, outdented) way out of the visible area of your site for the menu items we added (menu-item-165 and menu-item-166)
- the image “menu-home-bg.gif” is selected to show for the menu items we added
- the image “menu-home-active-bg.gif” is selected to show for these menu items when hovering the mouse over them
Note, the images used are the same as used in the Flexx themes, and are expected to reside in a subfolder /images/ in your theme folder. For other themes, you may have to adjust the location, width, perhaps add padding or margins, and of course you can create your own images to achieve a similar effect. Here’s the end result:
[...] This post was mentioned on Twitter by ithemes. ithemes said: How to replace text links with icon links in WP 3 navigation menus – http://bit.ly/a9rK6M (via @vanweerd) [...]
Hi Ronald,
Thanks so much for this post. I am trying to do something very similar, I want to put 32×32 social media images in my nav bar.
I have followed your steps and it has worked perfectly, except that the text I am replacing with the image has not shifted and is displaying over top of the image.
I am using the latest version of builder, so any help you could provide would be greatly appreciated.
I think this has been resolved though the support forum, there was an issue with invalid css
Hi Ronald,
Where in the Forum has this been answered? I’ve been searching for an hour and cannot find the answer to how to get rid of the text displayed over top my images in my navigation bar.
Thank you,
Pete
Line 3 in the sample css code in the article makes sure that the text will not be on the screen.
can you provide a link to your support forum where the css is corrected please?
[...] more here: How to replace text links with icon links in WP 3 navigation menus … Enjoy this post ? Tweet HERE or View original article here StumbleUpon twitter delicious [...]
[...] and attractive, just like this image for an example:So to get the icon links on your Menus, you can visit this page to read the whole tutorial.Good luck!You Might Like Theses Posts:Automatically Show Home Link On WP [...]
Hi Ronald, is it possible to add an icon to the left of text links? So that both text links and an icon is shown.
Hi, it sure is, check this out: http://www.ivorpadilla.net/cuztomizing-wordpress-custom-menu-icons/
[...] http://vanweerd.com/how-to-replace-text-links-with-icon-links-in-wp-3-navigation-menus/ [...]
Great tutorial.
Only problem now, is when I am on a page, it isn’t identified in the navigation menu. (The Flexx theme demo is the same).
Is there a way to have the hovered image show when on that particular page?
If so that would be perfect.
hello, thanks for this very helpful tutorial
I added the above code to my 2011 child theme but the 32 x 32 image doesn’t display. I know that you use the hybrid theme but could you help me use the correct css class and code?
Yeah It works! Thank you very much!
Hi, this is exactly what i want to do… but is there a 2013 alternative?? Cause text-indent seems not be suported anymore. It moves the whole of the screen – including the image
Kind regards,
Tom
Hallo,
i gave you the url of my test-site
the theme ist a childtheme of twenty twelve
i tried this the code i added to my style.css is:
#menu-item-280 {
text-indent: -9999px;
width: 40px;
}
#menu-item-280 a {
background: #0b2300 url(images/feed.png) top center no-repeat !important;
}
#menu-item-280 a:hover {
background: #0b2300 url(images/feed-active.png) top center no-repeat !important;
}
after identifying number 280 as the id of the menu-entry i want to be represented by an icon instead of text – the result is, that there in the place, where the menu-item should be shown, quite on top left ob the menu-item “ABMELDEN”, nothing is to be seen at all
so I got the additional css out and now the text ist here again
any tip?