Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Hamburger menu overflows to next line on small screens

Home Forums Support Hamburger menu overflows to next line on small screens

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #484895
    Justin

    I love GP and have everything just how I like it, however, I’ve noticed that on smaller screens, the hamburger menu does not fit next to my logo and is pushed onto another line. (I’m using the mobile header)

    Is there any way to change this behavior without making my logo smaller on all devices, just the ones that require it to fit?

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #484980
    Leo
    Staff
    Customer Support

    Hi there,

    The mobile header is supposed to be a simple square-ish icon – like your laptop icon.

    I think it will look cool if you use that as your mobile header logo. Do you want to give it a shot?

    #485005
    Justin

    I’ve tried that, and I’m not thrilled with the look.

    I’ve changed it so you can see for yourself, but it’s just not enough.

    I guess if there’s not an easy way to do what I want, I can always redesign the header logo to be more narrow.

    I just figured there might be a simpler solution.

    Thanks.

    #485013
    Leo
    Staff
    Customer Support

    I think it looks good if the padding around the logo is removed with this CSS:

    @media (max-width: 768px) {
        .mobile-header-navigation .mobile-header-logo img {
            padding: 0;
        }
    }

    You can also increase the site by increasing menu item height with mobile toggle on: https://docs.generatepress.com/article/menu-item-height-width/

    #485020
    Justin

    I personally think it’s still too empty in the middle, but thanks for the help.

    I’ll spend some more time messing with it and see if I can get it looking better.

    I might just make a logo that is about half the width of what I started with.

    #485088
    Tom
    Lead Developer
    Lead Developer

    You can always disable the mobile header and have your full header appear above the mobile menu. Might be worth checking out 🙂

    #485333
    Justin

    That was how I had it originally, before I started mucking around with it as I’m prone to do.

    #485612
    Tom
    Lead Developer
    Lead Developer

    That’s the best way to learn! 🙂

    #485616
    Justin

    I did get the logo resized, and messed with the padding a bit and I think it looks pretty good now, even on smaller screens. Thanks for all the help.

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