How do I make a navbar sticky in Webflow?

Set sticky, a top offset, and a high z-index

Sticky is a position, not a separate navbar element. The bar stays where you designed it until the visitor scrolls, then it holds at the top of the screen. When they scroll back to the top of the page, it sits in its original place again.

Select the navbar. Open the Style panel, then Position, and choose sticky. Set the top value to 0 pixels. Webflow's navbar article says you must set at least one side, top, bottom, left, or right, or sticky does nothing. For a page that scrolls up and down, that side is top. A left or right value does not catch a vertical scroll.

Then set a high z-index on the same navbar. Z-index is available once the element is not static, and a higher number paints above a lower one. Webflow's position article says the value can run from 0 up to 2147483647. The navbar article uses that highest value as its example so later sections do not cover the bar. A smaller number is enough when nothing else on the page uses a z-index that high.

Example: the home page has a white navbar and a dark hero under it. Sticky with top 0 keeps the white bar available while the hero moves away. Without the z-index, a later section that is also positioned can slide over the links.

Keep the navbar a direct child of the body

A sticky element is positioned against its direct parent. It behaves like a fixed bar only inside that parent. When the scroll reaches the bottom of the parent, the sticky element stops and moves off with the parent.

That is why Webflow's navbar article tells you to make the navbar a direct child of the body when it should remain available for the whole page. If the navbar lives inside the hero section, it will stick while the hero is on screen and then leave with the hero, even though top is 0 and the position says sticky.

In the Navigator, drag the navbar so it sits under the body, not inside a section. The relativity indicator in the Position controls shows which element the navbar is positioned against. For this pattern, that element should be the body. A wrapper that is only as tall as the first screen will release the bar at the bottom of that wrapper.

Choose sticky instead of fixed when the hero should stay clear

Fixed position is relative to the browser window. The element is taken out of the document flow and stays put as soon as the page loads, so it can cover the top of the hero.

Sticky stays in the flow. The hero begins below the navbar. Only after the visitor scrolls past the navbar's original position does the bar hold to the viewport. Webflow's navbar article recommends sticky for that reason.

A bottom value will not stick a navbar that is already at the top of its parent. Webflow's navbar article says this includes a bar that is the first element in the parent, or one aligned to the top with flex or grid. Use top for a top bar.

Remove parent styles that cancel sticky

Sticky can be set correctly and still fail. Webflow's position article lists the usual causes. Any parent with overflow set to hidden, scroll, or auto can stop it. Any parent with a set height can stop it. Some browsers still do not support sticky, so check the published page in the browsers your visitors use.

Overflow hidden is a common one. It is often added to a section to stop sideways scrolling. If that section is an ancestor of the navbar, the navbar will not stick. Move the navbar out of that section, or set the ancestor's overflow back to visible and hide overflow on a different element that does not wrap the navbar.

Check the Navigator from the navbar up to the body. For each parent, look at Size for a fixed height and at overflow. Clear the height, or set overflow to visible, on the parent that is blocking the bar.

If the navbar is a component, set these styles on the main component. Webflow's navbar article says edits to the main component update every instance. Sticky on one page only leaves the other pages scrolling the bar away.

Publish and scroll past the first screen

Publish and open the live home page. Scroll until the hero is gone. The navbar should stay at the top, and the links should still be readable over the next section. Scroll back to the top. The bar should sit in its original place, not remain as a second copy.

On a phone, scroll the same way. The menu button shows at the tablet breakpoint and below, and the bar should still hold while that button is on screen. If it sticks in the Designer and not on the live site, publish again after the position change.

If it still scrolls away at the hero, the parent is still the hero, not the body. If it never sticks at all, top is empty, or a parent still has overflow hidden or a set height. Fix that parent, publish, and scroll past the first screen once more.