[Resolved] Long logos on mobile header next to Burger button

[Alo]

Hi all! So I have a logo that is quite long. However, unless I crop the grid on the left of the logo (which is actually supposed to be part of it), The burger menu button always goes under the logo (at least on an iPhone 5 screen). It doesn’t matter if I save a lower resolution version of the logo, it gets scaled up and again pushes the menu button below it.

So far I have tried using the mobile header feature in the customizer etc, but to no avail. Help? P.S. Using latest theme and premium

Site: staging.tacky-steam.flywheelsites.com
User: flywheel
PSW: sharp-butter

[Leo]

Hi there,

Can you try this solution first? https://generatepress.com/forums/topic/mobile-menu-alignment/#post-260447

Make sure the mobile header feature is disabled.

[Alo]

Hi Leo,

It almost works, but now because the logo width is 70%, it’s squished. Otherwise perfect, if I could only make the height adjust automatically.

[Leo]

Can try this CSS:

@media (max-width: 768px) {
    .site-logo {
        max-width: 80%;
    }
}

But there really isn’t enough room for a big logo like that on mobile screens.

Have you considered using the mobile header with just the metal icon? Personally I think that will look slick.

[Alo]

I have tried the 80% css. It makes it also a bit better but it’s still skewed. Using other versions of the logo is currently out of the question because of my client’s wishes. Is it really not possible for the image to resize itself to fit it’s container without distortion?

One thought that just came to my head (although not ideal..): Would it work if I took the logo image and added whitespace inside the logo image itself?

Do I understand correctly that this issue is happening because the sides of the logo image are too different? As in wide but short with this one.

[Leo]

Hmm maybe give this a shot:

@media (max-width: 768px) {
    .main-navigation .navigation-logo img {
        height: 67px;
    }
}

[Alo]

Thanks, that worked! However is it reasonable to use the same units for both the width in the previous code and the height in this one? Can you recommend to use either px or % in this case?

[Leo]

% is used because the width of the screen is varies for different device so you want that to be responsive.

px just restrict the height of the logo so it’s not responsive and cannot get scaled.

On a second thought, I think you could also try setting the mobile height (by clicking the mobile height) to 67px.

[Alo]

Yeah, that last idea seemed to work the best. Set it at 59 px and I can clearly see where it starts to stretch. Thanks!

[Leo]

No problem!

[Author]

Posts