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:
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!
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.
