Mobile responsive ecommerce menu

  • syawedis
    May 15, 2026 at 2:14 pm

    Hello, I apologies if this has been answered before but I can never navigate the existing threads very well.

    I am building an ecommerce store with GP and im running into an issue where the Mobile version of the head has the logo and hamburger menu in one line, then the cart and account icons in another line below.

    Is there a way I can get the cart + account + hamburger menu all together on the right, on one line?

    Screenshot attached privately.

    EDIT: For the record I have the account + cart icons added separately, as an Element > that displays After Navigation

  • George
    May 16, 2026 at 2:22 am

    Hello,

    Can you provide a URL please?

  • syawedis
    May 16, 2026 at 8:25 am

    Hi sure im adding it to the private info now

  • George
    May 16, 2026 at 9:54 am

    Hello,

    The issue is that your cart/account icons are outside the mobile toggle wrapper, so they drop to a second line by default. The following CSS should fix the layout:

    @media (max-width: 768px) {
    .has-inline-mobile-toggle .inside-header {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    .has-inline-mobile-toggle .site-logo {
        flex-shrink: 0;
        width: 112px;
    }

    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        order: 3;
        flex-shrink: 0;
        margin-left: 8px;
    }

    .has-inline-mobile-toggle .gb-element-576b4f30 {
        order: 2;
        margin-left: auto;
        flex-shrink: 0;
    }
}

    Add that to Appearance > Customize > Additional CSS or inside your child theme styles. You may need to adjust the width: 112px value if your mobile logo is a different size.

    One thing to note — I checked your page markup and there’s no cart icon present at all currently. Head to Appearance > Elements, open the Element containing your account icon, and add the Mini Cart WooCommerce block alongside it in the editor. Once saved it’ll slot straight into the layout above.

  • syawedis
    May 16, 2026 at 10:26 am

    I tried my own css many times but failed, but yours workered wonderfuly, thank you!

  • George
    May 16, 2026 at 11:44 am

    Glad to know, you are welcome!

  • syawedis
    May 16, 2026 at 7:11 pm

    Hello again – there is actually a side effect from the css we added

    The menu looks good on mobile, except when i open the hamburger menu, the mobile menu opens a bit wonky now:
    https://prnt.sc/BKJwPmVEkeNI

  • George
    May 17, 2026 at 1:51 am

    Hello,

    Can you please add the URL again in the private section?

  • syawedis
    May 17, 2026 at 8:41 am

    Sure just added it to private info

  • George
    May 17, 2026 at 11:44 am

    Hello,

    Please replace the CSS you added earlier with this updated version:

    @media (max-width: 768px) {
    .has-inline-mobile-toggle .inside-header {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    .has-inline-mobile-toggle .site-logo {
        flex-shrink: 0;
        width: 112px;
    }

    .has-inline-mobile-toggle .site-logo img {
        display: block;
    }

    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        order: 3;
        flex-shrink: 0;
        margin-left: 8px;
        align-self: center !important;
    }

    .has-inline-mobile-toggle .gb-element-576b4f30 {
        order: 2;
        margin-left: auto;
        flex-shrink: 0;
        align-self: center !important;
    }

    .has-inline-mobile-toggle #site-navigation:not(.toggled) {
        display: none !important;
    }

    .has-inline-mobile-toggle #site-navigation.toggled {
        order: 4;
        width: 100%;
    }
}

    Add that to Appearance > Customize > Additional CSS. One thing to note — .gb-element-576b4f30 is a generated class that could change if you edit that block. If it ever breaks, you can add a custom CSS class to the outer GB element via its Advanced settings and update the selector accordingly.

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