[Resolved] Keeping Logo, Cart and Menu Icon under 1 row in mobile view

[mamin]

Hi,

The logo and the cart button is current on the 1st row while the menu button is on the 2nd row.

Is is possible to make the logo, cart, and menu button to be all within the same row under mobile mode? I’ve tried to reduce the logo’s resolution and I can’t find any of the options in the customiser that changes this.

Thanks in advance.

[Elvin]

Hi,

Can you link us to the site in question so we could check for the best approach?

You can include you site details in the Private information text area. Thank you.

[mamin]

Hi,
I’ve added the site in the Private Info section. The original theme used was Avery if it matters.

[David]

Hi there,

your site link is telling me Access is Denied – can you remove whatever security mod is blocking our ability to see it.

[mamin]

Sorry about that, I’ve turned of Cloudflare’s Geo blocking. Please try again.

Any other design/performance recommendations for the site are also welcomed.

[David]

The logo is too wide to be accommodate the all elements in a row.
Best fix would be to upload a more suitable sized logo in the Customizer > Layout > Header –> Mobile Header.

Or you can reduce its size using some CSS:

#mobile-header .site-logo.mobile-header-logo img {
    height: 60px;
}

[mamin]

Noted, thanks.

I switched to a smaller and square logo but the issue still persisted abit. Reducing the spacing in the Layout > Primary Navigation > Menu Item Width / Menu Item Height resolved it.

[David]

Glad to hear that!

[Author]

Posts