Menu bar on mobile device is moved to another line

Hi There,

My site’s menu bar is going down to next line on mobile and tablet which blocks some of the contents. May I know how to get it in one line? It looks fine in DevTools mode but not working in real devices environment. Thanks!

My site: https://figurist.com.hk

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px) {
      body:not(.home) .site-content {
        margin-top: 80px;
      }
    }

Regards,
Kharis

Hi Kharis,

Thanks for your prompt reply! Is it possible to move the hamburger into same row with the logo? Having it in 2 row makes the menu bar unnecessary large.

And it looks like this in tablet.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px) {
      .site-branding.col-md-4.col-9,
      .header-mobile-menu.col-lg-10.col-3 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;    
      }
    }

Regards,
Kharis

Thanks Kharis,

The horizontal position of the hamburger changed but still not in the same row.

Hello there,

I checked your site and it’s now not available for public access. It looks like “under construction” mode is enabled. Is there any other way to me to inspect your mobile menu directly?

Regards,
Kharis

Hi Kharis,

After consideration, I found that Sydney is more suitable for me so that I’ve change into it. Thanks for your help.

No problem. You’re welcome!

Please let us know in a new topic if you have any further questions about Sydney, or if we can provide you with any other assistance.

Regards,
Kharis