Archived topic
Icon menu bar position when hamburger is expanded
1 reply · Started by Nick on February 23, 2021
Team - At the url below, you can see an icon menu bar containing links such as Selling, Mortgages etc.
On mobile screen widths you can see this is positioned 59px from the top so as to sit directly beneath the main menu bar.
When the hamburger icon is clicked I would like this icon menu bar to always stay visible underneath the expanded menu bar as shown in image attached. Sometimes it does this successfully but often not.
To demonstrate the issue:
- Visit the link below on a mobile device
- Scroll down the page a little
- Click the hamburger icon
- The icon sub menu bar is no longer visible
Hi there,
you would need to create a copy of the Block Element you're using for the Icon Nav, and hook that into the generate_inside_mobile_header.
This will place it inside the mobile header so it remains in place when that becomes sticky.
It will require some CSS to hide the desktop version on mobile. And the mobile version will need a higher CSS order property eg. order: 20; to place it below the menu.
