Sticky not working in Webflow? Look one level up

Position sticky in Webflow usually fails because an element somewhere above it has overflow set to hidden, which makes that element a scroll container that never scrolls, so your sticky element sticks to a box that stays still. Change that ancestor’s overflow from Hidden to Clip and sticky works again, with the same clipping you had before.

The short answer

Sticky is not broken, and Webflow is not ignoring your setting. position: sticky holds an element in place relative to its nearest scrolling ancestor. Any ancestor with overflow set to hidden, auto or scroll becomes that ancestor, even if it never actually scrolls. The page moves, the wrapper does not, and the sticky element travels away with the wrapper as if it were static.

The fix is to find that ancestor and replace overflow: hidden with overflow: clip. Clip cuts off overflowing content the same way, but it does not create a scroll container, so sticky goes back to tracking the page. In Webflow, Clip sits next to Hidden in Style panel › Size › Overflow, and Webflow’s own note on that control says to try clip when sticky elements misbehave under overflow hidden.

Why position: sticky stops working in Webflow

The rule that breaks sticky lives one level up, sometimes several, which is why it is hard to spot. You select the navbar or the sidebar, the Style panel shows Position: Sticky and Top: 0, and everything looks right. The setting that breaks it sits on a section, a page wrapper or a component further up, often added months earlier for an unrelated reason. The usual reasons someone gives a wrapper overflow hidden:

• stopping a sideways scroll caused by an element that pokes out past the edge of the screen;
• clipping an image or a decorative shape to rounded corners;
• hiding the off-screen part of a slider, a marquee or a carousel;
• containing an interaction that slides elements in from the side.

Each of these is a legitimate job, and each one quietly turns the wrapper into a scroll container. In CSS, any overflow value other than visible or clip does that. Hidden only hides the scrollbar: the box can still be scrolled by a script or by keyboard focus, and that is exactly why the browser treats it as the thing sticky should stick to.

On our own site the same trap hit something other than a sticky element. Scroll-driven animations built on the CSS view() timeline stopped running inside a wrapper that had overflow hidden, for the same reason: the timeline attached to the wrapper, and the wrapper never scrolled. Switching that wrapper to overflow clip brought every animation inside it back. It was a one-line change, and finding it took far longer than fixing it.

How to find the wrapper that breaks it

In the Webflow Designer

1. Select the sticky element and confirm the basics in the Style panel: Position is Sticky, and a Top value is set (0, or the height of anything that should stay above it).
2. Open the Navigator and walk up the tree one parent at a time. For each parent, open Size in the Style panel and read Overflow.
3. Repeat at every breakpoint you care about. Overflow set only at a smaller breakpoint breaks sticky there and nowhere else.
4. Check combo classes and component instances as well, since the value may live on a class you rarely open.

This works, but on a deep page it is slow. The browser answers faster.

The 30 second check in DevTools

1. Open the published or staging page, right-click the sticky element and choose Inspect.
2. In the Computed tab, confirm that position is sticky and that top has a value.
3. Switch to the Console and paste the snippet below. $0 is the element you just inspected.
4. Every element it prints is a scroll container above your sticky element. The first one printed is the culprit, and its class name tells you which class to edit in Webflow.

for (let el = $0.parentElement; el; el = el.parentElement) {
  const { overflowX, overflowY } = getComputedStyle(el);
  const ok = (v) => v === 'visible' || v === 'clip';
  if (!ok(overflowX) || !ok(overflowY)) {
    console.log(el, overflowX, overflowY);
  }
}

If the console prints nothing and sticky still fails, the cause is one of the others further down.

The fix: overflow clip instead of hidden

In the Designer, select the element the snippet found, open Style panel › Size › Overflow and pick Clip instead of Hidden. In code, it is one declaration:

.page-wrapper {
  overflow: clip; /* was: hidden */
}

Visually nothing changes: whatever spilled past the edge is still cut off. What changes is that the wrapper stops being a scroll container, so the sticky element looks past it to the page. Two things are worth knowing before you switch.

• You can clip one axis. To stop only a sideways spill, overflow-x: clip is enough. With hidden on one axis, the other axis computes to auto, so the wrapper becomes a scroll container anyway. Clip on one axis leaves the other one visible.
• Clip cannot be scrolled at all. A box with overflow hidden can still be moved by a script, by an anchor link or by focus landing inside it. If a component relies on scrolling its own hidden overflow, such as a custom slider that sets scrollLeft, keep hidden on that component and move the sticky element out from under it instead.

If you cannot touch the wrapper, for example because it belongs to an embed, restructure: place the sticky element so that it is no longer a descendant of the clipping box.

Other reasons sticky does nothing

No top or bottom value

Sticky without an offset has no line to stick at. Set Top, or Bottom for an element that should stay at the bottom of the screen. Zero is a valid value; empty is not.

The parent is no taller than the sticky element

A sticky element only moves inside its parent. If the parent is exactly as tall as the sticky element, there is no room to travel, and the element leaves the screen as soon as the parent does. This is common with a sticky sidebar placed in a wrapper that hugs its content. The parent needs to be taller, usually the height of the content column beside it.

The element is stretched in a flex or grid row

A sidebar inside a flex row or a grid gets align-self: stretch by default, which makes it as tall as the row. A full-height element has nowhere to move. Set the sticky child’s own alignment to start (align-self: start) in the Style panel, or through Custom Properties if you cannot find the control, and it shrinks to its content and starts sticking.

How to keep sticky from breaking again

• Reach for Clip first. When a wrapper needs to hide spill, use Clip, and keep Hidden for boxes that genuinely need to be scrolled by a script.
• Retest sticky after any overflow change above it, at every breakpoint, because the break is silent and nothing in the Designer flags it.
• Keep the console snippet. It answers the question in seconds the next time someone reports that the sidebar stopped following.
• Apply the same check to scroll animations. Anything animated with a view() timeline inside a scroll container will not move either.

Once the navbar sticks, the next thing that usually goes wrong is anchor links landing under it. If your build has more quiet layout traps like these, our Webflow design and development work starts with exactly this kind of audit.