Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to highlight the current page in the wp nav menu. I've read through the codex and found .current-menu-item, which I'm using in my CSS.. However it's not working. What am I missing?

css

#header nav {
    float: left;
    padding-left: 25px;
    padding-top: 12px;
}

#header nav ul li {
    display: inline;
}

#header nav ul li a {
    color: #333333;
    font-family: amatic;
    font-size: 150%;
    padding-right: 25px;
}

#header nav ul li a:hover {
    color: #c6e000;
}

#header nav ul li a:last-child {
    padding-right: none;
}

#header nav .current-menu-item {
    color: #c6e000;
}

html/php

<div id="header">
     <nav>
    <?php wp_nav_menu( array('menu' => 'nav' )); ?>
     </nav><!-- end nav -->
</div><!-- end header -->

live site

share|improve this question

closed as off topic by Michael, toscho Jun 10 '13 at 22:54

Questions on WordPress Development Stack Exchange are expected to relate to WordPress within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer 1

up vote 1 down vote accepted

Since the text that displays your navigation is made out of anchor points, which has the color: #333333; assigned, you'll have to add the .current-menu-item color to the anchor itself:

#header nav .current-menu-item a { color: #c6e000; }

share|improve this answer
    
That was it, thank you. –  user1255049 Jun 10 '13 at 20:47

Not the answer you're looking for? Browse other questions tagged or ask your own question.