Archived topic

Hamburger menu not on same line as header image and search icon on mobile

1 reply · Started by Alf on November 1, 2020

Viewing posts 1–2 of 2

November 1, 2020 at 5:38 am #1513290

Hi there,

I am trying to implement the navigation search in the primary navigation. I works well on desktop with the search icon placing itself to the right of the hamburger menu.

However, on mobile the hamburger menu drops down to a second line underneath the image; which displaces the content also down. (The "top line" is just to header image and the search icon all the way to the right).

Would be grateful for any help with this.

Many thanks in advance,

Best,
Alf

(using latest versions of theme and and GP Premium)

November 1, 2020 at 7:59 am #1513499

Hi there,

ideally you would upload smaller logo to the Mobile Header ie. one that is not as wide.
Or you can reduce its current size with this CSS:

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

I would suggest you also exclude the Lazy Loading on that image. Most lazy loaders provide an option to exclude images by CSS Class, you can use: is-logo-image

This archived topic is closed to new replies.

Start building better websites today.