Active state for shop menu categories

The main shop drop down menu does not show the active category.

I see you add a class current-menu-item but I can’t get it to work.

.current-menu-item a:active {
color: red;
}

In developer tool if I force the element state to active it shows, but on page refresh it does not.

Other methods tired do not work either

.basel-navigation ul li a:active {
color: red;
}
.basel-product-categories li a:active {
color:red;
}

Hello,

Thank you for the question.

Try to fix it by adding the following code snippet to the Custom CSS section in Theme Settings. Write us about the results so we could add the fix in the next release

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

Regards

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,

Could you please provide some screenshots of the problem? We can’t understand what exactly menu you are writing about.

Thank you in advance.

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

Sorry, but we can’t understand you. Please provide some screenshot or web-site links so we could see what are you talking about and how our code works on your web-site. We can’t get it from pieces of code you sent us.

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

Yes, this class name current-menu-item comes from WooCommerce core and it is the same for any navigation menu and for any level through the site.

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

It is a very nice solution. Thank you for posting it here, on support forum 🙂

[Author]

Posts