[Resolved] menu cart – only display when product inside

[generatepressuser]

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

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[generatepressuser]

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.

[Elvin]

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)

A wise man once said:
"Have you cleared your cache?"

[generatepressuser]

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.

[generatepressuser]

Thanks again

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[generatepressuser]

Ah I see, from now I better do more specific from beginning ^^
Thank you for the explanation!

[Elvin]

No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts