I’ve tried to find out how to make an overlayed navigation menu that covers the entire browser window, but can’t find how to make one with Webflow.
The menu should open by clicking a hamburger button located somewhere in the page.
Please refer to the link below which is an example for how I’d like it to look once opened. The menu should close with the press of the ESC button or by clicking a linked “X” in the upper left corner.
Thanks for helping out.
Hey @Jiyu,
Ok sa basically what you want for this is to play with Z index.
Z index is like layering. Z index 15 would be in top of Z index 5 for example.
I’ve made a fast structure for you here 
http://overlaymenu.webflow.io/
https://preview.webflow.com/preview/overlaymenu?preview=9b1cce7b6a484abed9f27bd2cfe4495c
Ok first add your Overlay menu
Give it a Z index like 100
This is your overlay menu.
This is where you can put everything for your menu.
Add an initial appearance for your menu.
Put a div top corner somewhere.
Here i called it `close button``
This would be a cross for you or whatever you want to click on to close your menu.
Add a new interaction on this button :
Finally add a button to open your menu.
Be careful where it’s located.
Add a new interaction on open button
And there you have it
Of course it could be any kind of interaction.
Here i’ve play with opacity.
Could be transform or whatever, even both.
Hope this helps,
Hey @zbrah .
This is 100 % exactly what I was after, and I’ll try it out as soon as I get home. My day got a lot better now
I really appreciate the help and guidance. Thank you so much.
Cool @Jiyu
No problem at all.
Enjoy Webflow :webflow_heart:
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
