Archived topic
menu cart - only display when product inside
8 replies · Started by generatepressuser on October 7, 2020
Hello,
I have just updated GP and noticed, that the shopping cart on the right side is visible, although there is no product inside. Before the update, the cart was only visible if a product was inside.
Therefore I received a css code from you:
.mobile-bar-items.wc-mobile-cart-items:not(.has-items),
.main-navigation li.wc-menu-item:not(.has-items) {
display: none;
}
Is there something different in the css classes after the update?
Regards
Hi,
Non-working CSS is quite common after an update and it is usually solved by purging site cache.
That said, if you're using any caching plugin, can you try clearing the cache and then recheck if it works?
Let us know how it goes.
Hello,
Im not using any caching plugin.
How to clear the cache, you mean the browser cache with Ctrl+F5 ?
I restarted and tried another browser and the cart is still visible.
Why would that happen after an update, if the css class names would keep the same? Just wondering.
You can try this out.
.mobile-bar-items.wc-mobile-cart-items:not(.has-items), div.main-nav > ul.menu > li.wc-menu-item:not(.has-items) {
display: none;
}Why would that happen after an update, if the css class names would keep the same? Just wondering.
Update can have CSS codes that's written with more specificity. More specifically written CSS codes win out when there's conflict between codes.
I've scanned through the DOM structure of your site and found that a CSS code in GP's style.min.css?ver=3.0.0.1 wins out in specificity over the CSS added on your child theme.
Rewriting the code in a more specific way should fix this issue. (or resorting to use of !important)
Ah I see, I thought that custom css in child theme would win always over the parent theme.
That would mean I have to re-check the homepage, after every Theme update, to see if the custom css still works correct. Good to know.. more work :)
But thank you, now its working with your new code, perfect.
Thanks again
Since you'll do a re-check, perhaps this knowledge helps you with the CSS precedence:
1.) CSS styles with !important will always win.
2.) Inline css styles comes next in precedence order after !important. Ex: <div style="color:white">
3.) More specific selectors. ul.menu > li.menu-item > a will win over ul > li > a.
4.) Order of appearance inside the document. CSS codes of the same selector that's written later in the document will take precedence. Ex: writing .class{ color:red } on the beginning and .class{ color:blue } at the end will result in .class text color to be blue.
Ah I see, from now I better do more specific from beginning ^^
Thank you for the explanation!
No problem. :)
