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 nav to fixed position with full width/height and a high z-index, adding a background overlay.
- Use interactions to add a
no-scrollclass to the body on nav open (setting overflow hidden), and remove it on close. - Ensure underlying sections have lower z-index and static/relative positioning to remain behind the nav.
- Initially hide the nav on tablet and below breakpoints, toggling visibility via menu icon interactions.
- Reuse or recreate any custom interactions on CMS template pages for consistent behavior.
To create a fullscreen nav overlay on mobile landscape for a Webflow CMS page, while disabling scroll and keeping underlying content behind, follow these steps.
1. Set the Nav to Fixed and Fullscreen
- Select your nav wrapper (or menu container).
- Set Position: Fixed, and choose Top Left with Full Width & Full Height.
- Set Z-index to a high value (like 9999) so it overlays everything.
- Add a background color or semi-transparent overlay to simulate the effect (e.g.,
rgba(0, 0, 0, 0.8)).
2. Disable Scroll When Nav is Open
- Create a combo class or interaction that adds a class to the body when the nav is open (e.g.,
no-scroll). - Create a new Body class in the Style Panel:
- Set Overflow: Hidden.
- In your nav open interaction, use a Page Trigger or Navbar open trigger, and:
- Add class
no-scrollto Body on open. - Remove class
no-scrollfrom Body on close.
3. Keep Second Section Behind Nav
- Ensure your second section’s z-index is lower than your fullscreen navigation (which should already be very high).
- If you're seeing it appear above:
- Confirm the second section has Position: Relative or Static, not something like Fixed or Absolute with high z-index.
- If necessary, give your second section a z-index like 1, and your nav at least z-index 1000.
4. Hide Nav Initially on Mobile Landscape
- Go to Tablet and below breakpoints.
- Set the nav overlay to Display: None by default.
- Use a Menu Icon (hamburger) to toggle it using interactions or the built-in Navbar open/close functionality.
5. Ensure Compatibility on CMS Pages
- CMS template pages inherit global navbar settings.
- If you're using custom interactions, make sure they’re either reused or re-created in the CMS template.
- Avoid dynamic changes to z-index via CMS content if not absolutely necessary.
Summary
To make your nav fullscreen on mobile landscape with scroll disabled and underlying sections hidden, set your nav to fixed/fullscreen with high z-index, use interactions to disable scroll via a no-scroll class, and ensure lower sections have a lower z-index and non-fixed positioning. Adjust these styles and interactions on tablet and below breakpoints to target mobile landscape.