WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] How to add icons to tabs in nav-menu in wordpress (thesis if possible…)

[Resolved] How to add icons to tabs in nav-menu in wordpress (thesis if possible…)

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

    @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 🙂
    Oren

    esmi

    @esmi

    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;}

    etc.

    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 li.tab-1 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 ?

    esmi

    @esmi

    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,
    Oren

    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 ?
    thanks

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

    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:
    http://wpcodesnippets.info/blog/lets-put-icons-in-our-menus.html

    thank you 🙂

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