Support » Fixing WordPress » How to add icons to tabs in nav-menu in wordpress (thesis if possible…)

Viewing 15 replies - 1 through 15 (of 15 total)
  • esmi


    Forum Moderator

    You seem to have done this already.

    no no… what you saw is the before_header menu.
    this is a custom menu that i’ve added and need to be customized to adjust the background to the topics. this menu doesn’t even have tabs in it…

    i want a different thing – i want to add small icons to each tab in the default nav-menu (like the one i have below the header)..

    is there a way to do that ?

    thank again 🙂



    Forum Moderator

    Each tab in that lower menu has a unique class – eg. tab-1, tab-2 etc – on the li tag. So you should be able to use those classes to apply a unique icon to each tag via your custom CSS – e.g.:

    .custom .menu .tab a {padding-left:10px;}
    .custom .menu .tab-1 a {background:#e9e9e9 url(images/tab1.gif) no-repeat left center;}
    .custom .menu .tab-2 a {background:#e9e9e9 url(images/tab2.gif) no-repeat left center;}


    well, it doesn’t do the job..
    i can’t figure out why..
    thank you for the help 🙂

    ok !!!!
    it works !
    i needed to add .custom .menu a {background:transparent url(ht
    just the “li” before “tab” solved it !

    great thank you 🙂

    how can i change the “hover” affect so once i mouse-over it, it’ll change the background to a different icon ?



    Forum Moderator

    .custom .menu .tab-1 a:hover {background-image url(images/tab1-hover.gif);}

    thank you 🙂

    Hello again.
    is there a way to add more space between the edge of the TAB to the text inside the TAB ? i need some room to put the icons in…
    thanks alot,

    Please help here. i need this to finish up my site

    and one more question please: i want to have two page-nav-menus but i want each one to show different tabs. is there a way to do that ?

    and i must say: the HOVER doesn’t work for me..

    Luke America


    Classes will allow you to implement menu icons with 3.0+, but it can be a rather tedious process. Plus, for multisites, the process is even more challenging.

    Although it doesn’t offer different ‘hover’ icons, I’ve written a menu subclass function that lets you easily change menu icons. And, you can add arrows for parent menus, if you like.

    It’s simple to use. Put the function in your functions.php file. Then, just put the URL of your images in the ‘description’ field using the menu editor. It will work with all sites on your server. That’s it.

    The code is here:

    thank you 🙂

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘How to add icons to tabs in nav-menu in wordpress (thesis if possible…)’ is closed to new replies.