[Support request] Doble woocommerce cart in menu with max mega menu

[joanllompart]

Hi, I’ve been using GP-Premium for the last three years and it’s the first time I can’t found a solution for a problem.

I amb developing a new ecommerce amb I have cart in menu and mini-cart submenu enabled. The question is than I am trying max mega menu but now I can see two carts in mobile and tablet and one in desktop (with different color behavior without mega max menu enabled), mini-cart submenu is not working, both carts aren’t well aligned with the rest of menu items.

I’ve posted this issue in max mega menu forums, too.

Here you can see the site in development:
https://islaglass1.b.wetopi.com/my-wordpress-manager?2e42e04e60cdef6a33fa78374b12f78659a40d44bca2259380c3477a

Thank you,

Joan

[Tom]

Hi there,

That’s the mobile cart item displaying at 768px. Your menu isn’t collapsing to mobile at that width, so you need to adjust the mobile menu breakpoint option in Customize > Layout > Primary Navigation to match the value you’ve set in your mega menu plugin.

[joanllompart]

Hello Tom!

You’re right. Mega menu mobile breakpoint default is 600px and in GP is set at 768px.

I’ve been trying diferent values. At 600px or 400px it solves the doble cart in tablet, but not in mobile. I need to set 300px to make disappear doble cart in menu mobile, but it makes disappear cart in menu bar and only is possible to see the cart while displaying the menu items, at the bottom. So I don’t like the result.

Any idea to make disappear cart in bottom and display cart in its place in menu bar?

Thank you very much for your help!

Joan

[Tom]

I’m seeing the cart icon in the menu toggle on mobile right now. Did you get this solved?

[joanllompart]

No, I guess I can’t explain well enough in English. The mobile cart icon is in the menu, but when menu is clicked then appears the duplicated cart icon at the bottom.

[Tom]

Got it – give this a shot:

@media (max-width: 768px) {
    #mega-menu-primary .wc-menu-item {
        display: none;
    }
}

[joanllompart]

Great Tom! 🙂 You found it!

I’ve changed max width to 600px to match values in mega menu settings and Customize > Layout > Primary Navigation. Otherwise menu cart dissappeared for me in tablet.

I amb not a CSS expert, but I’ve added this to align cart with menu items in desktop and tablet:

#mega-menu-primary .wc-menu-item {
        margin-top: 5px;
    }

But I can’t find the way to align mobile cart…

[joanllompart]

Well, this worked for me in mobile:

.mobile-bar-items.wc-mobile-cart-items {
	 margin-top: -5px;
}

Thank you very much, Tom! Your support is always very helpful in this forum.

Regards,

Joan

[Tom]

No problem! Glad you got it working 🙂

[Author]

Posts