Docs

[christiaan001]

Hi Guys,

I wanting to set a ‘current-menu-item’ class to the woocommerce cart in the top navbar so as to set styling to the cart when the cart page is active.

I have noticed that when an x page is active the class ‘current-menu-item’ is inserted into the html to set the navbar styling.

How might I best achieve this?

[Prasant Rai]

Hello Christiaan,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[christiaan001]

Hi,

I’m developing locally, is there anyway you could still assist?

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.woocommerce-cart .x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart > span.outer {
    color: #ffdedd;
    background-color: #ff2a13;
}

.woocommerce-cart .x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart {
    color: blue;
    background-color: #ffdedd;
}

You may change the colors.

Hope that helps

[christiaan001]

Thanks Paul,

I have already implemented your suggestion to change the styling of ‘.woocommerce-cart .x-navbar .x-nav > li.x-menu-item-woocommerce >’ a .x-cart element, including hover states.

What I trying to do is change the styling of the above element when the ‘cart’ page is the ‘current menu item. I.E. when the cart page is the current page the user is visiting.

I have noticed that when any other page is ‘the current page’ then a .current-menu-item class is created for that menu li item.

How can I style the cart when the cart page is the current page being viewed?

Have attached images to help clarify.

Thanks

Christiaan

[Christopher]

Hi there,

Please add following code as well :

li.menu-item.current-menu-parent.x-menu-item.x-menu-item-woocommerce a:hover {
    box-shadow: 0 2px 0 0 #ff2a13 inset;
}

Hope it helps.

[christiaan001]

Hi Christopher,

Thanks for your suggestion.

Unfortunately your solution is for the hover state. Which I can style already.

What I’m trying to achieve is to style the ‘cart’ top menu item when the ‘cart page’ is the active current page. IE the user is viewing their cart.

I have noticed that when other menu items eg. Home, About, Services etc are the current active paged being viewed, a ‘current-menu-item’ class is created in the html.

How can I add such a class to the html of the cart list item markup so as to be able to style the cart when it is the current menu item.

thanks again,

Christiaan

[Christopher]

Hi there,

Please add this code :

.woocommerce-cart li.menu-item.current-menu-parent.x-menu-item.x-menu-item-woocommerce a {
    box-shadow: 0 2px 0 0 #ff2a13 inset;
}

Hope it helps.

[christiaan001]

That’s the one!

Thanks for your guys, problem solved.

Christiaan

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts