Cart changes color when it has items added.

[Stateofmind_]

My shopping cart behaves exactly as i want it to when it's empty. On the homepage the header is overlayed, so it's displayed as white together with the logo & main menu. And when i go to any other page, it changes color to grey along with the black logo & main menu in header. 

When an item it added to the cart however, it stops "changing" color when leaving the home page for another page on the site. It stays white, and appears almost invisible. 

Note that i have added this code with help from a developer here in the community :

 <style>
.cart-has-items .site-nav__link--cart.site-nav__link--cart {
background-color: transparent !important;
}
</style>

But even when removing this snippet the problem still remains. Please help with resolving this. 

Thanks!

Link: https://vrf9b0ylvgzvnfpd-55008723125.shopifypreview.com

  

 

[theycallmemakka]

Hi @Stateofmind_ ,

I have written custom CSS for this solution. Please follow below steps and let me know your feedback.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above tag </body>

<style>
html:not(:has(.template-index.cart-has-items)) .site-nav__link--cart.site-nav__link--cart {
    color: var(--colorNavText)!important;
}
html:not(:has(.template-index.cart-has-items)) span.cart-link__bubble-num {
    color: #fff;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka