Mobile Navigation Overlay

Design help General
1

Hey all! I’m working on a new site and need some help with the mobile navigation. I know this is possible, but I just can’t seem to figure it out. Here’s what I’d like to happen… Normal nav on desktop/tablet, that nav goes away on mobile and is replaced with a “menu” link. When “menu” is clicked a full page section pops up with the appropriate links. Check out www.instrument.com on mobile for a reference. Screen grabs are below. I know this will take some use of interactions and display settings. What I’m running into is getting the full page section working. Work in progress and screen grabs of instrument.com are below. Hope that makes sense. Thanks!!!

https://webflow.com/design/agent2015?preview=284bcd58caeff9a25de1db915e377b4c

640×1136 44.4 KB

640×1136 36.3 KB

2

Bueller?

I’m still smuggling with this. Maybe I can find a template with a similar nav and copy it.

3

@md673 Part one having the mobile menu show on just certain screen sizes is easy in WF, simply select the mobile nav and under the “Menu icon for” just move the slider to select when you want the mobile menu and when you don’t.

Part two is with the mobile menu open use the designer to size the open menu area (maybe 100% width) and you might need to change the z-index of the mobile menu link box so it floats above the open menu in order to get it to close.