- This topic has 9 replies, 3 voices, and was last updated 6 years, 3 months ago by
.
-
Posts
-
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?
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?
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.
Lead Developer
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!
- You must be logged in to reply to this topic.