Archived topic
Floating Moble Header
5 replies · Started by Charles on December 31, 2021
I'm trying to display a simple icon-based floating header for my mobile users.
Like this:

Any ideas about a good approach?
And happy new year everyone!
Hi Charles,
When you say floating header do you mean fixed header at the top of the screen?
If so, we can achieve this with some custom CSS.
Does the mobile header need to have a dropdown menu list?
Let me know :)
Yes and yes. Thanks!
Hi there,
as it requires a 'drop down' menu i would work with default mobile navigation or mobile header - which provides the default hamburger icon and menu system. For the other icons you can add them using a Block Element:
https://docs.generatepress.com/article/block-element-overview/
And use the menu_bar_items hook to insert them beside the hamburger.
It will take a little CSS but if you want to try setting that up we can take a look at the rest
OK, So I'll try to dive into this one.
But I have some basic questions/problems:
What exactly is the mobile menu? When I look at the mobile version of my site on Android, I have the same two menus that I have on the desktop version except they show hamburgers instead of the items.
On mobile the primary menu does not show the menu name I've given it in the appearance editor. It should say "News & Events" but instead it just says "Menu."
Also I have difficulty debugging on my Android phone because the menus do not update with changes to them like they do on the desktop site. I'm guessing this is caching? But how to refresh?
Thanks
I have the same two menus that I have on the desktop version except they show hamburgers instead of the items.
Yes, on mobile, menu becomes a hamburger icon with dropdown menu item list instead of listing all the menu items.
Also I have difficulty debugging on my Android phone because the menus do not update with changes to them like they do on the desktop site. I’m guessing this is caching? But how to refresh?
That's not a theme question, but I did a little google search for you (not sure which browser you are using): https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DAndroid