[Resolved] Mobile menu, change color or move? Currently invisible on a phone

[Lee]

Hi

New user to generatepress so go easy, loving it by the way. Great purchase!

I’ve created a site (not sure if allowed post URL?) using the “mellow” theme variant. It’s a basic site, just a few pages, all is well other than on a phone.

On a phone the menu icon (the burger icon I believe) is invisible, it’s actually there and works, but as its white, on white background users, can’t see it. I looked for specific settings under customize to change the mobile-only menu, but maybe I’m missing it?

Only fix I found was to add LOADS of padding (too much) so the menu isn’t on the white background, but that creates an ugly as hell desktop site etc.

What’s the best fix? Can I make the burger icon a different colour, or move it upwards off white, or what other fixes can i use?

EDIT: I should have added, in the customize dashboard if I switch it to phone, it looks fine. But on real-life phones (tested 4 diff models) the menu is not the same place as in customize dashboard.

Thanks

[Leo]

Hi there,

Looks like the negative top margin to merge the page hero and content is causing the issue.

I think the mobile header layout would work better here:
https://docs.generatepress.com/article/mobile-header/

Can you give that a shot and let me know what you think?

[Lee]

Thanks, its midnight here, I shall take a look tomorrow and get back to you.
Thanks for the fast reply, excellent.

[Leo]

Sounds good.

Let me know 🙂

[Lee]

That’s worked perfectly, and so so simple! I didn’t see that option before, I must take time to read all the documentation for the theme before I build more sites.

Thanks for super fast support, and your great theme/plugins. I’ve used a few before, this is far easier for an “intermediate” user like myself and looks great, loving it.

Lee

[Leo]

Glad I could help 🙂

[Author]

Posts