htmlcsswordpresswoocommercestorefront

Woocommerce Storefront navigation menu color change for active product category page & Cart menu item


I have changed the primary-navigation-menu current page color by below CSS

.current_page_item a {
    color: #4fff51!important; }

But it is working for only pages, not for product category pages & Cart menu item

In the menu, Home & Shop are the pages and remaining are the product category pages.

This is my website graceamaron.com

thank you


Solution

  • Because the product pages are children of Store the store list item is not seen as the current page, so you will have to add an extra class to select by parent. You do this by adding .current_page_parent a to the CSS.

    After looking a bit further through your site, I also saw the following link still shows up gray: https://graceamaron.com/product-category/homeups/

    if you add .current-menu-item a to the CSS, it will also change the color for this nav item.

    To make your cart green as well when selected, add .site-header-cart .current-menu-item a to the class.

    To solve these issues, change your class to the following:

    .site-header-cart .current-menu-item a,
    .main-navigation .current_page_parent a,
    .main-navigation .current-menu-item a,
    .main-navigation .current_page_item a {
        color : #4fff51!important;
    }
    

    Previews of the class working:

    Product Page: enter image description here

    Category Page: enter image description here