[Resolved] menu cart – only display when product inside

Home Forums Support menu cart – only display when product inside

  • This topic has 8 replies, 2 voices, and was last updated 5 months ago by Elvin.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1477253
    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

    #1477265
    Elvin
    Staff
    Customer Support

    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?"

    #1477277
    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.

    #1477345
    Elvin
    Staff
    Customer Support

    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?"

    #1477371
    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.

    #1477386
    generatepressuser

    Thanks again

    #1477392
    Elvin
    Staff
    Customer Support

    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?"

    #1477396
    generatepressuser

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

    #1477397
    Elvin
    Staff
    Customer Support

    No problem. πŸ™‚

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.