How can I make my nav fullscreen with an overlay in Webflow's CMS page on mobile landscape? I want the nav to disable scroll and ensure that the second section stays behind the nav overlay despite having a lower z-index. Thank you!
TL;DR
- Set the navbar to fixed position with 100vw/100vh sizing and a high z-index to cover the screen fully on mobile landscape.
- Add a semi-transparent overlay div with slightly lower z-index than the nav and show it via interactions when the nav opens.
- Disable background scrolling by setting body overflow to hidden when the nav opens, and reset it on close.
- Ensure all CMS and page content have lower z-index values so they stay behind the nav and overlay.
To make your navigation fullscreen with an overlay on CMS mobile landscape pages, lock scroll, and keep underlying sections behind the nav, you’ll need to carefully configure layout, positioning, and interactions in Webflow.
1. Make the Nav Fullscreen on Mobile Landscape
- Select your Navbar or Menu Wrapper element in the Navigator.
- In the Style panel, set:
- Position: Fixed (top: 0, left: 0)
- Width: 100vw, Height: 100vh
- Z-index: High value (e.g., 9999)
- Make sure it is only visible when menu is opened (controlled via interactions or the Webflow Menu button component).
2. Add a Semi-Transparent Overlay
- Create a div inside or just below the fullscreen nav wrapper. Name it something like “Nav Overlay”.
- Set styles:
- Position: Absolute or Fixed
- Top: 0, Left: 0, Width: 100%, Height: 100%
- Background: rgba(0,0,0,0.5) for a dark overlay
- Z-index: slightly lower than the nav, but higher than the page (e.g., 9998)
- Set it to display: none by default and show when the nav opens using interactions.
3. Disable Page Scroll When Nav is Opened
- Use a Page interaction or Navbar open interaction to add a class or set body styles.
- When nav opens:
- Use the Body (All Pages) selector.
- Set Overflow: Hidden to prevent background scroll.
- When nav closes:
- Reset Overflow: Visible or Auto.
4. Ensure CMS Content Stays Behind Nav
- Go to your main content sections (e.g., hero, about, CMS content).
- Set Z-index values lower than your overlay/nav (e.g., 0–10).
- If your nav uses
position: fixed, the content will naturally stay behind unless forced forward, which you're avoiding.
5. Test Responsively and Debug Z-Index Conflicts
- Preview in mobile landscape mode using Webflow’s built-in responsive tools.
- Open and close the nav ensuring:
- No scroll occurs while nav is active.
- Overlay and nav fully cover the screen.
- Other sections don’t overlay the nav, even on scroll.
Summary
To create a fullscreen mobile landscape nav on CMS pages: use fixed positioning, 100vh sizing, a high z-index nav overlay, and use interactions to disable scroll on the body. Ensure CMS and other page sections have lower z-index values so the nav remains on top.
