How can I disable the horizontal scroll on my Webflow site while keeping the vertical scroll enabled?
TL;DR
- Check for elements overflowing the viewport using Webflow's Navigator and browser DevTools.
- Add a custom class (e.g., no-horizontal-scroll) to the Body and apply overflow-x: hidden via custom code or Embed element.
- Review responsive breakpoints to ensure no elements extend beyond the screen width.
Unwanted horizontal scrolling in Webflow typically results from elements overflowing the viewport. You can disable it while keeping vertical scrolling fully functional.
1. Audit the Page for Overflowing Elements
- Check for elements that have fixed widths or positions extending outside the viewport.
- Use Webflow’s Navigator (Z key) and scroll through layout sections to spot problem areas.
- Turn on overflow indicators in the browser’s DevTools to find items causing horizontal scroll.
2. Apply Overflow Settings in Body Wrapper
- Select the Body (All Pages) element.
- Go to the Style panel and set:
- Overflow: Hidden on the horizontal axis only, if possible.
- Since Webflow doesn’t directly support axis-specific overflow in the UI, use a custom class:
- Add a custom class to the Body like
no-horizontal-scroll.
3. Add Custom Code to Restrict Horizontal Scrolling
- Go to Page Settings or Project Settings > Custom Code > Head/Before </body> and insert this inline style:
<style>body.no-horizontal-scroll { overflow-x: hidden; }</style>
- This forces the body to prevent any overflow on the x-axis while maintaining normal vertical scrolling.
4. Use Webflow’s Designer Custom Code Feature
- You can also add the same CSS as an Embed element within the Webflow Designer (usually inside a global symbol like a Footer):
- Drag an Embed component.
- Paste the same
<style>tag with.no-horizontal-scroll.
5. Recheck Layout in Responsive Views
- Open Tablet, Mobile Landscape, and Mobile Portrait views in Webflow Designer.
- Ensure no elements are pushing wide due to large fixed widths, negative margins, or large paddings.
Summary
To disable horizontal scrolling in Webflow, apply overflow-x: hidden via a custom class on the body or an inline <style> tag. Then, check for and fix layout issues in each breakpoint to prevent elements from expanding beyond the viewport.