[Support request] Menu label and WooCommerce cart icon issues on mobile device

[Chelsea]

Aloha!

I have Generate Press Premium and I’m using the WooCommerce feature in Customizer on the website watercolorsbycalen.com. I’m seeing an issue with the “add cart to menu” feature when viewed on my mobile device. Basically, on mobile (when looking at my iPhone 14 Pro), the label “Menu” that I added for the Mobile Menu Label is dropping below the hamburger menu on mobile view. This is making the mobile menu bar height much larger than needed and taking up valuable real estate and it looks very funky when I scroll down the page on mobile. In contrast, when I remove the label “Menu” and go with a no-label version – the layout then looks normal – except for when I start scrolling down the mobile page I noticed that the cart icon is very close to the hamburger menu on the right-hand side. Almost like the container space for these elements is too small and pushes everything together closely or when the “Menu” label is added then it pushes it down a line.

FYI: In the Generate Press Customizer, the mobile view looks all good and doesn’t render in a funky way like it does on my mobile phone.

Hope this all makes sense. Thank you so much!

Aloha,
Chelsea

[Fernando]

Hi Chelsea,

Can you try adding this through Appearance > Customize > Additional CSS?:

.inside-navigation.grid-container button.menu-toggle {
    display: flex;
    flex-wrap: nowrap;
}

Let us know how it goes.

[Chelsea]

Aloha Fernando!

Thank you! That worked for fixing the wonky menu bar layout on mobile. However when I scroll down on mobile and the sticky menu moves with my scroll… the cart icon and the hamburger menu are so close together on the right-hand side that it is hard to click the cart icon cause it triggers the menu and vice versa. Any possible fixes for that? Thank you so much!

Aloha,
Chelsea

[David]

Hi there,

try adding this CSS:

@media(max-width: 768px) {
    .main-navigation .menu-bar-item.wc-menu-item {
        padding: 0 20px;
        margin-right: 10px
    }

}

.gp-icon.icon-menu-bars {
    position: relative;
    top: -2px;
}

It also includes an adjustment to hamburger icons position.

[Author]

Posts