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).

WordPress 3 navigation theme locations

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.

WordPress 3 navigation page menu

WordPress 3 navigation categories menu

Create a custom link to your “home” page

Add the URL to your home page and create a custom link.

WordPress 3 navigation create 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.

WordPress 3 navigation custom link home

Integrate the menus in the WordPress layout

WordPress 3 navigation add theme locations

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.

WordPress custom Home link

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-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:

icons replace text link in WordPress navigation


  1. Charley Hays

    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.

    1. Ronald

      I think this has been resolved though the support forum, there was an issue with invalid css

      1. Pete

        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,


        1. Ronald

          Line 3 in the sample css code in the article makes sure that the text will not be on the screen.

          1. anthony

            can you provide a link to your support forum where the css is corrected please?

  2. Renji

    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.

  3. moose

    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.

  4. Le

    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?

  5. Tom

    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,

  6. Peter Grab


    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?

Leave a Reply