How to style each list item background of the wordpress navigation separately -
so i'm working standard wordpress navigation , need change background of each menu item when link inside list item active.
.current-menu-item trick list items problem have same styling 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 have experience this?
i tried using pages like: http://codex.wordpress.org/function_reference/wp_nav_menu without result unfortunately..
also using child selectors didn't work..
it sounds want different active states each individual link. .current-menu-item captures active link, doesn't offer customization each individual link.
i think can use combination of nth-child , .current-menu-item. know .current-menu-item gets applied? if it's on <li>
, 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 in fiddle: http://jsfiddle.net/dz32r/
Comments
Post a Comment