Why doesn't my Webflow site scroll on mobile after publishing, even though I don't have overflow hidden and the page scrolls on preview?

If your Webflow site doesn’t scroll on mobile after publishing, but it scrolls fine in preview, it’s likely due to a hidden element or setting affecting page overflow.

​

1. Check for Full-Screen Fixed Elements

​

• Look for any elements with position: fixed and a height of 100vh or more.
• If these elements have overflow: hidden, they may block scrolling on mobile.
• Common offenders: full-screen nav menus, intro sections, or overlays.

​

2. Inspect for Overflow Settings on Body/HTML

​

• Make sure Body (All Pages) and Html elements don’t have overflow: hidden applied.
• Sometimes this style is set globally in Project Settings → Custom Code, so review your head/footer code.

​

3. Review Open Menu States

​

• If you’re using a Navbar component, ensure the mobile menu properly closes when not intended to be open.
• Unclosed menus with fixed or absolute positioning can prevent background scroll.

​

4. Test for Hidden Overflow via Interactions

​

• Check if any Page Load or Scroll interactions set overflow: hidden on the body or a wrapper.
• These settings might be applying incorrectly on mobile.

​

5. Publish to a Fresh Subdomain

​

• Sometimes the issue is cached or host-specific. Try publishing to a new Webflow staging URL (e.g., yoursite-v2.webflow.io) to test clean behavior.

​

6. Use Browser Developer Tools

​

• Use mobile device simulation in Chrome DevTools.
• Inspect scrollable elements and confirm which layers exist above or below others.

​

Summary

​

The most common reason your Webflow site won't scroll on mobile after publishing is a fixed or absolute-positioned element with overflow rules blocking scroll, often due to JS interactions, custom code, or open mobile nav menus. Double-check all full-screen elements, interactions, and global overflow settings.