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
    Forum Moderator

    @esmi

    You seem to have done this already.

    orenlebbo
    Member

    @orenlebbo

    🙂
    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
    Forum Moderator

    @esmi

    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.

    orenlebbo
    Member

    @orenlebbo

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

    orenlebbo
    Member

    @orenlebbo

    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 🙂

    orenlebbo
    Member

    @orenlebbo

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

    esmi
    Forum Moderator

    @esmi

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

    orenlebbo
    Member

    @orenlebbo

    thank you 🙂

    orenlebbo
    Member

    @orenlebbo

    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

    orenlebbo
    Member

    @orenlebbo

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

    orenlebbo
    Member

    @orenlebbo

    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

    orenlebbo
    Member

    @orenlebbo

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

    Luke America
    Member

    @lukeamerica2020

    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

    orenlebbo
    Member

    @orenlebbo

    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.