theme development - current-menu-item class not working

admin管理员组

文章数量:1406937

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

But Not working in "Books" Menu

See below screen shot

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

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

But Not working in "Books" Menu

See below screen shot

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

• theme-development
• css

Share Improve this question edited Dec 26, 2014 at 8:11 Relax asked Dec 26, 2014 at 7:25 RelaxRelax 18122 gold badges55 silver badges1515 bronze badges 6

• Are you sure it is adding the same class to current menu ? Have you checked by inspecting element – Rohil_PHPBeginner Commented Dec 26, 2014 at 7:27
• i checked with inspect element current-menu-item class not applied to the particular menu, that is my problem – Relax Commented Dec 26, 2014 at 7:30
• Then you have provided wrong code :) Pls edit with the right code. – Rohil_PHPBeginner Commented Dec 26, 2014 at 7:31
• i think you not understand clearly, 1 sec i update my question – Relax Commented Dec 26, 2014 at 7:33
• @Rohil_PHPBeginner i updated my question with screen shot please see – Relax Commented Dec 26, 2014 at 7:54

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 5

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.

Edit: A probably better aproach would be to actually insert the post type archive in the nav menu, then the filter becomes unnecessary.

本文标签： theme developmentcurrentmenuitem class not working