To make your navigation fullscreen with an overlay on a mobile landscape view in Webflow's CMS page, you can follow these steps:
1. First, make sure you have a navigation element set up in your CMS page and that it is placed at the top of your layout.
2. Select the navigation element and set its position to "Fixed" in the Styles panel. This will ensure that the navigation stays in place when scrolling.
3. Now, let's make the navigation fullscreen. Set the width and height of the navigation element to 100% using the sizing options in the Styles panel. This will stretch the navigation element to fill the entire viewport.
4. Next, create an overlay by adding a div block or a section below the navigation element in your layout. Give the overlay a class name for styling purposes.
5. Set the position of the overlay to "Fixed" as well, and set its width and height to 100% to cover the entire viewport.
6. To disable scrolling when the navigation is open, add an interaction to the overlay. Select the overlay element and go to the Interactions panel. Add a new trigger for the overlay and choose "Tap" or "Click" event.
7. In the interactions timeline, add an action to the trigger and choose "Disable Scroll". This will prevent users from scrolling while the overlay is active.
8. Lastly, to ensure that the second section stays behind the navigation overlay despite having a lower z-index, make sure that the overlay has a higher z-index value than the second section. You can set the z-index in the Styles panel for both elements. Give the overlay a higher z-index value than the second section so that it appears above it.
By following these steps, you should be able to achieve a fullscreen nav with an overlay on a mobile landscape view in Webflow's CMS page.