[Resolved] Background Current – Cart

[Javi]

Hi there,

I have changed the colors of the primary menu but it seems that the “Background Current” is not applied to the cart icon (https://chuchesxiana.com/cart/).

I tried with some CSS but the cart button looks like it does not have an id.

I just want a white cart icon when users are in the cart. Please, could you help me?

Thanks in advanced!

[Leo]

Hi there,

Can you give this CSS a shot?

.main-navigation .mobile-bar-items.wc-mobile-cart-items a {
    color: #ffffff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know.

[Javi]

Hi Leo,

Thanks for your help.

Now it works if I am in the cart page, but if I am in another page it is still white (I want it red in this case). I have tried with different pseudo classes but I can’t figure it out.

I guess I am coding something wrongly :s

[Leo]

Hmm so basically you want the cart to have the same style as the menu items?

It didn’t work when you adjust the settings in Customizer > Colors > Primary Navigation? Those settings should work for everything in the navigation.

Let me know.

[Tom]

You may need to do this:

.woocommerce-cart .main-navigation .mobile-bar-items.wc-mobile-cart-items a {
    color: #ffffff;
}

[Javi]

Hi Leo and Tom,

Yes, I basically want the cart to have the same style as the menu items, but it does not work with Customizer > Colors > Primary Navigation.

Anyways, I did how Tom says and now I have the cart with the same style as the menu items except for the hover. I tried to add this code but it does not work either:

.woocommerce-cart .main-navigation .mobile-bar-items.wc-mobile-cart-items a:hover {
    color: #f1c40f;
}

[Tom]

Actually, if you remove this custom CSS you’ve added, none of the above should be necessary:

.mobile-bar-items.wc-mobile-cart-items {
    display: block;
}

[Javi]

I have removed the custom CSSs I added and it is not working either :s

Here is how I see the cart button (hover):

It should be like the other menu items (hover):

[Leo]

Hmm I still see this CSS being added:

.mobile-bar-items.wc-mobile-cart-items {
    display: block;
}

[Javi]

Done it, but it is not working yet :s

[Leo]

Are you using any caching plugin or server cache? I still see the CSS being added.

[Javi]

Yes, but it is deactivated. What could be wrong?

[Leo]

Try activating again, clear it then deactivate.

[Javi]

Not working yet. I am doing something wrong for sure. I am quite amateur I guess!

Now I just have this CSS:

[Leo]

Can you try removing that?

[Author]

Posts