CODEWITHSUNDEEP
wordpressnavigationstylingnav
leonidus
leonidus

Reputation: 103

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

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.

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..

Upvotes: 1

Views: 3585

Answers (1)

Colin
Colin

Reputation: 2824

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/

Upvotes: 2

Related Questions