How to create full screen mobile navigation that removes the body and etc?

[SouthernCalifornia]

I created a mobile navigation with DIVs in webflow. So when you click an icon I made, it shows a div in the middle of the screen.

I also have a hero section with 1440px height. When the nav shows, you can scroll the nav which is fine. However when the nav ends you can still see the hero image, since the nav is about 1000px in height, but the hero is much bigger.

I want it to fill the screen and allow the user to scroll the nav, but they cannot go scroll farther below the div. This is just the same way how Apple’s website is laid out:

Apple

Does anyone know what settings I should apply to the DIV to do this? Or should I modify the height of all of the other objects on the screen to do this? Thanks!

[Syndicate15 (Douglas Mason Jr)]

That would be cool to tackle, I’m interested as well. I like full screen, non-scrollable navs

[Davidlin_ch12 (David Xin Long Lin)]

I have a solution for your problem, although it might not be the best one!

Check the site I made for this topic here: https://preview.webflow.com/preview/testsiterino?preview=dca93763d66e278972ef0d0c543145d4

Okay here goes:
Step one
Have your nav div properties include these settings.
Height: 100%
Width: 100%
Position: Fixed
Display Setting: None

Step two
Make a interaction to the icon you made. Call it whatever you like.

Step three
Add a click trigger and affect your nav div with it.
First click should display block
Second click should display none

Step four
Add a new click trigger to the same interaction and affect one of the sections in your site.
First click should display none
Second click should display block

Step five
Repeat Step four until all of your sites sections, have a trigger dedicated to it.

Important! Make sure that your icon is not nested inside of a section.
That should be it.
You can play with the animation and make it cool, but this is the basics

EDIT
Playing around with it, I found out, that if you change the nav div position to Absolute, you will gain the same effect, although you can now scrool the nav menu.