WooCommerce Cart to Dropdown on Mobile

[David]

Hi There!

I just added WooCommerce on my website, but I have a slight problem.
On desktop it looks great, but on mobile it destroys the entire look of the header.
Because my logo is pretty wide, the cart makes it such that the hamburger menu falls on the second row.

Is there an option or code to move the cart into the burger menu itself on mobile?

Currently I ended up with the following code to hide it on mobile, but it is not an ideal situation:

#mobile-header .mobile-bar-items.wc-mobile-cart-items {
    display: none;
}

[David]

Hi there,

simplest method would be to enable the Off Canvas Navigation for Mobile and then you can add a Cart Widget to Off Canvas Widget Area. Then keep your CSS to hide the cart icon on mobile.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts