WordPress.org

Ready to get started?Download WordPress

Forums

Styling the nav (wp_nav_menu) with classes (3 posts)

  1. all-nighter
    Member
    Posted 4 years ago #

    I would like to modify the styling of specific list items (or categories) in my nav. I know how to modify all of the list-items so that they all look a particular way but now I want to modify each one individually so that they will each have a different color on their hover states.

    http://www.all-nighter.com

    This is what I have right now. I'm new to wordpress and would appreciate any help. Thanks!

  2. Equal Web Creative
    Member
    Posted 4 years ago #

    I cannot access the site at the moment as there is a PHP error

  3. Rev. Voodoo
    Volunteer Moderator
    Posted 4 years ago #

    if your theme uses wp_nav_menu to display menus (ie, you use the menu builder to create a menu) the each item gets an ID/class assigned I believe

    each item looks like this when I hit view->source

    <li id="menu-item-1016" class="menu-item menu-item-type-post_type menu-item-1016">Forum

    so adding that to your css would work, since you have an ID and a class, you could hit either
    #menu-item-1016
    or
    .menu-item-1016

    would work

    so for hover on that particular example:
    .menu-item-1016 a:hover {
    background: #cc99aa;
    color: #fff;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic