How can I create a fixed menu on Webflow's mobile version without causing page scroll behind the menu? Disabling the scroll offset option doesn't seem to work. Placing the navbar at the top also doesn't resolve the issue. What could be the problem with this option?

TL;DR

Set the Navbar to fixed position with 100% height/width and a high z-index, and use the .w--open combo class to detect when it’s active.
Use custom JavaScript to toggle body.style.overflow = 'hidden' when the menu is open, and add CSS for .nav-menu.w--open with overscroll-behavior: contain and touch-action: none to block iOS background scroll.

You're trying to create a fixed mobile menu in Webflow that prevents page scrolling behind the menu when it's open. However, disabling scroll via Webflow’s settings isn’t fully preventing background page scroll, especially on mobile devices. Here's how to resolve that properly.

1. Understand Why Webflow’s Scroll Behavior Might Fail

Webflow's built-in mobile nav doesn't fully disable background scroll — especially on iOS devices — even when you enable the prevent scrolling when menu is open option.
This is due to CSS overscroll behaviors and how touch events propagate, which Webflow doesn’t completely handle.

Select your Navbar in the Navigator.
Change its position to Fixed and anchor it to the top-left.
Set the height and width to 100% so it covers the entire viewport when open.
Set a higher z-index (e.g., 9999) to be above other elements.

In the Navbar open trigger, Webflow automatically adds a class like w--open or a custom combo class to the nav.
Use that class combo (e.g., .nav-menu.w--open) to apply additional styles or functionality.

4. Use Interactions or Custom Code to Stop Page Scroll

Webflow doesn’t natively block body scroll. You’ll need to manually disable scroll on the <body> using Webflow interactions or custom code.
In Webflow, add a custom attribute to <body> to apply overflow: hidden when menu is open.

Steps:

Go to Page Settings → Before
Add the following small script inline:

<script>  const trigger = document.querySelector('.navbar-button-class'); // Your menu button  const body = document.body;  trigger.addEventListener('click', () => {    const menuOpen = document.querySelector('.nav-menu-class').classList.contains('w--open');    if (menuOpen) {      body.style.overflow = 'hidden';    } else {      body.style.overflow = '';    }  });</script>

Replace .navbar-button-class and .nav-menu-class with your actual class names.

5. Solve for iOS Safari Specifically

Add CSS touch-action and overscroll-behavior on the open menu (via custom code or in Webflow):

Example:

In Webflow’s custom code (Inside <head>):

<style>  .nav-menu.w--open {    overscroll-behavior: contain;    touch-action: none;  }</style>

This helps block scroll chaining and touch gestures inside the menu area.

Summary

To create a fixed mobile menu without background scroll, set the navbar to fixed fullscreen, disable <body> scrolling via script or interaction when the menu opens, and manage iOS-specific behavior with overscroll-behavior and touch-action. Webflow’s default settings alone often aren’t enough.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer