Hamburger menu overflows to next line on small screens

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?

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.

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/

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.

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

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

That's the best way to learn! :)

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.

Glad we could help!