0

current-menu-item class not working for particular menu in my theme, My css code is

.mainNav ul li a {
color: #686868;
font-size: 14px;
height: 38px;
line-height: 38px;
display: inline-block;
padding: 0 10px;
border-radius: 2px; 
}


.mainNav ul li.current-menu-item a,
.mainNav ul li.current-menu-item a:focus {
    background: #69bd43;
    color: #ffffff; 
}

.mainNav ul li a:hover {
    background: #69bd43;
    text-decoration: none;
    color: #ffffff;
}

.mainNav ul li a:hover

and

.mainNav ul li a

is working

but

.mainNav ul li.current-menu-item a, .mainNav ul li.current-menu-item a:focus

Not working

see the below screen shot

.current-menu-item working in "Natural Foods" Menu

enter image description here

But Not working in "Books" Menu

See below screen shot

enter image description here

In My header.php

<nav class="mainNav">

            <?php 
                $args = array(
                    'theme_location' => 'primary' 
                 );
            ?>  
            <ul class="container"><?php wp_nav_menu( $args ); ?></ul>               

        </nav><!-- End mainNav -->

In My style.css

/* Header */

.mainNav {
    background: #ffffff;
    margin-top: 45px;   
}

.mainNav ul li {
    display: inline-block;
}

.mainNav ul li a {
    color: #686868;
    font-size: 14px;
    height: 38px;
    line-height: 38px;
    display: inline-block;
    padding: 0 10px;
    border-radius: 2px;
}

.mainNav ul li.current-menu-item a,
.mainNav ul li.current-menu-item a:focus {
    background: #69bd43 !important;
    color: #ffffff; 
}

.mainNav ul li a:hover {
    background: #69bd43;
    text-decoration: none;
    color: #ffffff;
}
  • Are you sure it is adding the same class to current menu ? Have you checked by inspecting element – Rohil_PHPBeginner Dec 26 '14 at 7:27
  • i checked with inspect element current-menu-item class not applied to the particular menu, that is my problem – Relax Dec 26 '14 at 7:30
  • Then you have provided wrong code :) Pls edit with the right code. – Rohil_PHPBeginner Dec 26 '14 at 7:31
  • i think you not understand clearly, 1 sec i update my question – Relax Dec 26 '14 at 7:33
  • @Rohil_PHPBeginner i updated my question with screen shot please see – Relax Dec 26 '14 at 7:54
2

This is happening because the menu item is created with the page page "books", but the page currently displayed is post-type-archive-books (see classes in the body and menu item list). You can use something like

function add_nav_menu_classes($classes, $item){
   if( is_post_type_archive('books') && ($item->title == "Books" ) ){
      $classes[] = 'current-menu-item';
   }
   return $classes;
}
add_filter('nav_menu_css_class' , 'add_nav_menu_classes' , 10 , 2);

placed in functions.php to force adding the "current-menu-item" class to the books page menu item while in post-type-archive-books.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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