[Resolved] Mobile header logo size

[Evan]

Hi –

I have two questions about mobile headers and haven’t been able to find an answer in the existing documentation or forum threads.

I’ve uploaded a mobile logo with the dimensions 1080×140 to ensure that the entire logo stretches across the mobile screen, including plus-sized phones. When I look at the mobile logo under “Customize” in the back-end of WP, it looks like it stretches across the entire mobile screen, shown here.

However, when I look at the live website on my iPhone 7+, I see that the logo isn’t stretched all the way across the screen, and instead has the search icon to the right of it and the menu icon below it, shown here.

Is it possible to have the logo display completely across the top and have the menu and search icons below it for all mobile devices, like in the first photo?

Also, when I remove the mobile logo and use the desktop logo on mobile, both the menu and search icons display below the menu, but one is justified to the left and the other to the right, rather than together like in the second photo. You can see what I’m talking about here.

Ideally, I’d like my mobile site to look like the third photo, with the menu icon on the right and the search icon on the left, except with the correct mobile logo across the top rather than the desktop logo. Is this possible?

Any help appreciated!

– Evan

[Tom]

Hi there,

Give this CSS a shot:

#mobile-header .site-logo {
    width: 100%;
}

.mobile-header-navigation .mobile-header-logo img {
    width: 100%;
    height: auto;
}

.mobile-header-logo #mobile-header .menu-toggle {
    margin-left: auto;
}

Let me know 🙂

[Evan]

It worked, thanks as always!

However, for some reason, the search icon and menu icon switched positions, so the search icon is flush to the left margin and the menu icon is flush to the right margin.

Is there a way to flip them, so the menu icon is on the left and the search icon is on the right?

– Evan

[Tom]

Give this a shot:

.mobile-header-logo #mobile-header .menu-toggle {
    margin-left: 0;
    order: 1;
    margin-right: auto;
}

[Evan]

Thanks!

[Tom]

No problem 🙂

[Evan]

Hi –

I’m having the same issue as before with my mobile header where the logo isn’t flush across the screen on mobile devices, and instead only extends about 3/4 of the way across the screen (and isn’t centered), with the search icon to the right of it, and the menu icon below it.

Is it possible to make the logo flush across the screen so it reaches from edge to edge on mobile, putting both the search icon and menu icon below the logo? I’m viewing on an iPhone 7+

It looks like the CSS suggested below worked in the past, but this was prior to the new elements tool for Generatepress, and I’m not exactly sure if the previously suggested CSS will still work, and if so, where do I put it? A webhook? If so, where should it be placed on the site?

Any help appreciated!

– Evan

[David]

Hi there,

add this CSS:

.site-logo.mobile-header-logo {
    margin-left: 0 !important;
}

[Evan]

Awesome, thanks!

Do I add it using a webhook? If so, where do I place it?

– Evan

[Leo]

That’s just CSS so one of these methods here:
Adding CSS: https://docs.generatepress.com/article/adding-css/

[Evan]

Hi again –

I finally got around to implementing all the CSS recommended above. Once the mobile site is loaded, the logo looks great and is displaying at the top of the mobile site and flush across the mobile screen, with the search icon and menu hamburger below it – exactly what I wanted, thanks.

However, I’ve also been messing around with implementing Autoptimize for site speed, and for some reason today the logo started displaying wonky where it first loads about 3/4 of the way across the screen (the original container size) with an empty container to the right of it, then it seems to finish loading and stretches itself entirely across the screen.

I’ve been trying to figure out how to resolve the issue to no avail. I checked the CSS (included below) as well as purged the Autoptimize cache numerous times and also cleared my mobile website data.

Interestingly, for one of my pages (evantarver.com/books-and-novels) the mobile logo seems to load fine, but for the rest of the pages and all my posts, it loads 3/4s first and then stretches across the entire screen second. Any thoughts on a fix so it loads flush across?

CSS:

#mobile-header .site-logo {
width: 100%;
}

.mobile-header-navigation .mobile-header-logo img {
width: 100%;
height: auto;
}

.mobile-header-logo #mobile-header .menu-toggle {
margin-left: auto;
}

.site-logo.mobile-header-logo {
margin-left: 0 !important;
}

[Evan]

Interesting – it looks like the culprit could be when I checked “lazy loading” on Autoptimize. If I leave it unchecked the mobile logo loads normally.

Ever heard of this? Is there a way to use lazy loading w/o affecting the mobile logo?

[Leo]

Is there a way to exclude certain image being lazy loaded within Autopmize?

[Evan]

Yup, can do – appreciate the help all!

[Leo]

No problem 🙂

[Author]

Posts