Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Long logos on mobile header next to Burger button

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #342468
    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

    #342489
    Leo
    Staff
    Customer Support

    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.

    #342542
    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.

    #342557
    Leo
    Staff
    Customer Support

    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.

    #342566
    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.

    #342567
    Leo
    Staff
    Customer Support

    Hmm maybe give this a shot:

    @media (max-width: 768px) {
        .main-navigation .navigation-logo img {
            height: 67px;
        }
    }
    #342569
    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?

    #342598
    Leo
    Staff
    Customer Support

    % 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.

    #342746
    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!

    #342869
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.