how to display cart icon in header on all devices

  • Resolved raddish

    (@raddish)


    6 years, 11 months ago

    Hello, I changed (tried to) the storefront header to display side-by-side the hamburger menu – logo – cart icon, for all devices.
    I got the hamburger menu to display on desktop by hiding the main menu and overriding the hamburger display:none as follows:

    @media only screen and (min-width: 768px) {
    .primary-navigation {
    display: none !important;
    }
    .handheld-navigation, .main-navigation.toggled .handheld-navigation, .main-navigation.toggled div.menu, .menu-toggle {
    display: block !important;
    }
    }
    However, no matter what I try, I cannot get the cart icon to display below 768px (breakpoint) I can get the actual cart contents and text span (amount and qty) to show with similar markup to the above with a float: right, but I don’t want those.
    I disabled the footer mobile menu (which is where the cart icon would show up) and tried umpteen css tweaks, searched every file I could see for a clue but to no avail. Is it a code thing?
    My site is “under construction” but I haven’t done much to the original in the demo linked. Thank you.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter raddish

    (@raddish)

    PS I found this line inside the header-cart js: window.innerWidth<768
    would that have anything to do with it?

    (wp-content/themes/storefront/assets/js/woocommerce/header-cart.min.js?ver=2.2.5)

    Thread Starter raddish

    (@raddish)

    OK got it! Doofus here missed the css selector which is: .site-header-cart .cart-contents::after {}
    So I just copied the markup from the min-width:768px to the max-width:768px.
    It works but if there is a more proper way I would love to know it. Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘how to display cart icon in header on all devices’ is closed to new replies.