Active state for shop menu categories

Hi Thanks,

Yes works, but had to isolate the menu

.basel-navigation .menu .menu-item-22 li.current-menu-item > a {
color:red !important;
}

The code affected the top menu because the active page menus items have both the classes current-menu-item and current-page-item. Not sure that they need both, so the top items can be styles separately from the drop down items. Where is the place those classes are added?

HI, It is not a problem, but if I want the SHOP menu title to be White on black background and the Active category to be red, the code you gave would make the SHOP or any other top level menu item Red instead of White because it has the same current-menu-item class, but it also has current-page-item class. If the Top menu item just had the current-page-item class it would be easier to style the lower menu items differently.

See below: li class shop-mega-menu for ABOUT US top level menu item the two classes for active page:

<div class=”main-nav site-navigation basel-navigation menu-left” role=”navigation”>
<ul id=”menu-menu-gauche-1″ class=”menu”><li class=”menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item menu-item-34 menu-item-design-default item-event-hover”>ABOUT US (ACTIVE ITEM)
<li class=”shop-mega-menu menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-22 menu-item-design-sized item-event-click with-offsets item-menu-opened”>SHOP
<div class=”sub-menu-dropdown”>

And for the active product category menu item SUB CATEGORY 1 we see only the current-menu-item class.

<div class=”container”>
<ul class=”sub-menu”>
<li class=”menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-148 menu-item-design-default item-event-hover”>CATEGORY 1
<ul class=”sub-sub-menu”>
<li class=”class=”menu-item menu-item-type-taxonomy menu-item-object-product_cat current-menu-item menu-item-has-children menu-item-149 menu-item-design-default item-event-hover””>SUB CATEGORY 1 (ACTIVE)
<ul class=”sub-sub-menu”>
<li class=”menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-150 menu-item-design-default item-event-hover”>SUB CATEGORY 2

It doesn’t matter. No big deal we fixed it. Actually I found that the classes I am mentioning come from WordPress core files nav-menu-template.php and post-template.php and I found the functions to remove and change them.

All we wanted to do was have different colored top level menus from the menu items in the drop down.

We styled the top menu using the current_page_item class, but then when we styled the current-menu-item for the drop downs the top menu items got that styling too because they also have the current-menu-item class.

You can close this. Thanks

Wordpress core.

Here is how we removed the class we didn’t need from the parent menu items:

add_filter('nav_menu_css_class', 'add_active_class_to_nav_menu');

function add_active_class_to_nav_menu($classes) {
    if (in_array('current_page_item', $classes, true)) {
        $classes = array_diff($classes, array('current-menu-item', 'active'));
        $classes[] = 'current-menu-parent-item'; // adds a different class or leave as ''
    }
    return $classes;
}