Updated April 18, 2026

Sticky Headers

A navigation bar or CTA bar that stays fixed at the top of the viewport as the visitor scrolls, keeping key actions always accessible.

https://
FreeNo signup~1 minute

Sticky Header explained

A sticky header stays pinned to the top of the browser window as the visitor scrolls down the page. On landing pages, it typically contains a logo, maybe a minimal navigation, and a CTA button. The purpose: no matter how far down the page a visitor scrolls, the primary action is always one click away.

Sticky headers are especially valuable on long-form landing pages. A visitor convinced by a testimonial in the middle of a 5,000-pixel page shouldn't have to scroll back to the top to find the sign-up button. A sticky CTA button solves this elegantly. Data from several A/B tests shows sticky CTAs can improve conversion rates by 5-15% on long pages, simply by reducing the effort between "I'm convinced" and "I'll sign up."

Getting sticky headers right

The biggest problem: sticky headers that eat too much vertical space. A 120px-tall sticky header on a mobile phone (with 700px of viewport) steals 17% of the visible content area on every scroll position. That's a terrible tradeoff. Keep sticky headers thin — 50-60px max on desktop, 44-50px on mobile. Many good implementations use a "smart" sticky that hides when scrolling down and reappears when scrolling up, reclaiming that space.

Also watch the visual weight. A sticky header with a bright background color and a high-contrast CTA button competes with your page content for attention. Consider making the sticky header semi-transparent or using a subtle background that doesn't dominate. The CTA should be visible but shouldn't be screaming at the visitor on every single scroll position.

Related terms

Related reading

See these concepts in action

Analyze your landing page and get scored across all 8 dimensions.

https://