We want the page to have this dark overlay (sorry we don’t know the actual term for this) on the page when the mobile menu opens. Here’s an example of what we mean:
We got a div called ‘mobile-menu-overlay’ and tried to do the same thing…but realised that it’s not possible with our rather limited Webflow knowledge because:
- When we give a greater Z-index than the nav menu, you can’t click on the mobile menu icon, let alone getting the menu to open
- When we set the Z-index to be lower than the nav bar, the dark overlay doesn’t cover the top horizontal area of the screen that the nav bar occupies. So we ended up having this upside-down L-shape white area, while the rest of the page has darkened. Looks awful!
We can’t seem to figure out how to ‘sandwich’ the dark overlay, so that it will overlay the entire page as well as the top horizontal area when the mobile menu opens, while remain beneath the opened mobile menu.
Would anyone be able to help us please?
Thanks!
Our read-only link is here