WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to add icons to tabs in nav-menu in wordpress (thesis if possible...) (16 posts)

  1. orenlebbo
    Member
    Posted 3 years ago #

    Hi.
    i want to add a different icon to each tab in my navigation menu (the after_header menu in: http://www.xn--4dbcyzi5a.com/).

    thanks,
    Oren

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    You seem to have done this already.

  3. orenlebbo
    Member
    Posted 3 years ago #

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

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

  5. orenlebbo
    Member
    Posted 3 years ago #

    well, it doesn't do the job..
    i can't figure out why..
    thank you for the help :)

  6. orenlebbo
    Member
    Posted 3 years ago #

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

  7. orenlebbo
    Member
    Posted 3 years ago #

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

  8. esmi
    Forum Moderator
    Posted 3 years ago #

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

  9. orenlebbo
    Member
    Posted 3 years ago #

    thank you :)

  10. orenlebbo
    Member
    Posted 3 years ago #

    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

  11. orenlebbo
    Member
    Posted 3 years ago #

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

  12. orenlebbo
    Member
    Posted 3 years ago #

    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

  13. orenlebbo
    Member
    Posted 3 years ago #

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

  14. Luke America
    Member
    Posted 3 years ago #

    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

  15. orenlebbo
    Member
    Posted 3 years ago #

    thank you :)

  16. comprido
    Member
    Posted 3 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.