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?


#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;


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

live site

closed as off topic by Michael, fuxia 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.


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; }

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