How to style each list item background of the wordpress navigation separately

1 Views

So I’m working with the standard wordpress navigation and I need to change the background of each menu item when the link inside the list item is active.

.current-menu-item does the trick for all list items but the problem then is that I have the same styling for each element.

Read More

For instance: 

<nav>
    <div>
        <ul>
            <li>
              <a href="index.html">home</a>
            </li>
            <li>
              <a href="portfolio.html">portfolio</a>
            </li>
        </ul>
    </div>
</nav>

Does anyone have experience with this?

I tried using pages like: http://codex.wordpress.org/Function_Reference/wp_nav_menu
But without any result unfortunately..

Also using child selectors didn’t work..

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. It sounds like you want different active states for each individual link. .current-menu-item captures the active link, but doesn’t offer customization for each individual link.

    I think you can use a combination of nth-child and .current-menu-item. Do you know where .current-menu-item gets applied? If it’s on the <li>, this should work:

    nav li:nth-child(1).current-menu-item {
    background-color: red;
}
nav li:nth-child(2).current-menu-item {
    background-color: blue;
}
nav li:nth-child(3).current-menu-item {
    background-color: green;
}

    See it in a fiddle: http://jsfiddle.net/Dz32R/