Sticky Header vs Static Header: When a Fixed Navigation Bar Helps or Hurts Conversions

Almost every website template sold in 2026 ships with a sticky header switched on by default. That is a design trend, not a conversion strategy. A sticky header website can lift engagement on a 4,000 word service page and quietly kill conversions on a mobile product page, and the difference has nothing to do with taste.

This post skips the blanket advice. Instead, you get a comparison of sticky and static headers across the four things that actually move numbers (mobile screen real estate, scroll depth, CTA visibility and accessibility), followed by a decision framework organised by site type.

Quick definitions: sticky, fixed and static headers

A sticky header (also called a persistent or fixed header) stays visible at the top of the screen while the visitor scrolls down the page. A static header scrolls away with the rest of the content and only comes back when the user scrolls to the top.

In CSS, the two implementations behave differently, and confusing them is where most layout bugs start:

Practical note: use position: sticky for headers whenever you can. Because the element still occupies space in the document flow, you avoid the classic position: fixed problem of content hiding underneath the bar and having to patch it with manual padding.

The four factors that decide sticky vs static

1. Mobile screen real estate

This is the deciding factor for most sites, because mobile is where the majority of traffic and the majority of the friction lives.

A typical phone gives you roughly 640 to 850 CSS pixels of usable height once the browser chrome is drawn. A padded sticky header with a 40px logo easily reaches 64 to 80px. Add a promo bar and a sticky filter row and you are at 140px of permanent overhead, which is 15 to 20 percent of the screen gone before the content starts.

Rule of thumb we apply on client projects:

• A sticky header should never exceed 10 percent of the viewport height on mobile.
• Only one element may be sticky at a time. Header, promo bar, filter bar, chat bubble and cookie banner cannot all be persistent.
• If you cannot fit the sticky header under 56 to 64px on mobile, make it static on mobile and sticky on desktop. That is a two line media query, not a redesign.

2. Scroll depth and page length

Sticky headers earn their keep in proportion to page length. On a page that is two screens tall, the visitor is never far from the top, so persistence adds cost without benefit. On a page that is ten screens tall, scrolling back to the top is a real tax, and that is precisely where a persistent nav reduces abandonment.

A simple threshold: if the average page is longer than about four viewport heights, a sticky header starts to pay off. Below that, static is usually the better trade. There is a detailed walkthrough elsewhere.

3. CTA visibility

Here is the part most teams get backwards. The value of a sticky header is rarely the navigation. It is the persistent primary action inside it: Book a call, Add to cart, Get a quote, Start free trial.

If your header has no CTA, a sticky header is mostly a persistent logo. If your header does have a CTA, measure it. Across long-form service pages we have seen sticky header CTAs collect a meaningful share of total conversions from visitors who read to 60 to 80 percent depth and then convert without scrolling back up.

The alternative pattern is often stronger on mobile: keep the header static and use a sticky bottom action bar instead. Thumb reach is at the bottom of the screen, not the top, and a bottom bar does not compete with the content the user is reading.

4. Accessibility and the anchor link jump problem

This is where sticky headers break in ways nobody notices until a user complains.

Anchor links land under the header

Click an in-page anchor such as #pricing and the browser scrolls the target to the very top of the viewport, which is exactly where your fixed bar is sitting. The heading is hidden and the user sees the middle of a paragraph. Fix it with CSS rather than JavaScript offsets:

html {
  scroll-padding-top: 5rem; /* height of the sticky header */
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 5rem;
}

Keyboard focus gets covered

Keyboard users tabbing down a page can have the focused element scrolled under the sticky bar, so the focus ring is invisible. scroll-padding-top on the scroll container solves most cases. Test it by pressing Tab through an entire long page.

Zoom and short viewports

This is the complaint you see repeatedly in web design communities. At 200 or 400 percent zoom, or on a landscape phone, a sticky header can swallow half of the available height. WCAG 1.4.10 (Reflow) and 1.4.4 (Resize Text) both come into play. The defensive pattern:

@media (max-height: 480px) {
  .site-header { position: static; }
}

Screen readers and repeated landmarks

A sticky header is not inherently a screen reader problem, but it must still be a single <header> with a proper <nav> landmark and a working skip link. If your skip link lands behind the sticky bar, it is broken.

Sticky vs static: head to head

The decision framework by site type

Instead of asking “are sticky headers good?”, ask “what job does my header do on this page template?”. Here is how we decide.

Ecommerce category and listing pages: sticky, but slim

Shoppers on listing pages scroll a lot and switch categories often, so persistent access to search and cart genuinely helps. What hurts is stacking a promo bar, a full header and a sticky filter row.

• Keep a condensed sticky header: search, cart, menu trigger. Drop the tagline and secondary links after the first scroll.
• On mobile, prefer sticky filter and sort controls over a sticky brand header if you have to choose one.
• Show the cart count in the sticky bar. It is one of the highest value persistent elements in retail.

Ecommerce product pages: static header plus sticky add to cart

On a product page the visitor has one job. Giving them a persistent path back to the category tree is often a net negative, while a persistent Add to cart is close to a guaranteed win.

• Header: static, or auto-hide on scroll down.
• Sticky element: a bottom bar with price, variant summary and Add to cart on mobile, appearing once the main buy box scrolls out of view.

Checkout and lead forms: static, always

Any persistent navigation during checkout is an invitation to leave. Reduce the header to a logo and a trust signal, keep it static, and remove the main menu entirely.

Long-form service and landing pages: sticky with a CTA

This is the clearest case for a sticky header website pattern. Pages of 1,500 words or more, read top to bottom, where the conversion decision can happen at any scroll depth.

• Header contains one obvious primary CTA and no more than five links.
• Use the hide on scroll down, reveal on scroll up pattern so reading is uninterrupted but the CTA is one flick away.
• Consider a thin scroll progress indicator instead of extra chrome.

One-page sites and microsites: sticky, with anchor fixes mandatory

One-page sites depend on anchor navigation, so the nav must remain reachable. But they are also the sites where anchor jump bugs are most damaging, because every menu item is an anchor. opendatasoft.com has a solid rundown on this.

• Set scroll-padding-top to match the exact header height, and re-check it at every breakpoint.
• Highlight the active section so users know where they are.
• Cap the header at around 56px on mobile. A one-page site with a 100px sticky bar feels like browsing through a letterbox.

Blogs, documentation and knowledge bases: sticky, minimal

• Documentation benefits from a sticky header plus a sticky in-page table of contents on desktop only.
• On blogs, a slim sticky bar with search and a subscribe action usually beats a full nav.
• Never make the header sticky on mobile article pages if it costs more than 60px. Reading comfort wins.

Portfolios, agencies and image-heavy sites: static or auto-hide

When the content is the visual, a persistent bar competes with it. Use a static header with a floating menu button, or auto-hide on scroll.

Summary table

The hybrid patterns worth knowing

1. Auto-hide (directional) header. Hides when scrolling down, reappears when scrolling up. Gives you full screen height while reading and instant access on demand. This is the best default for content sites.
2. Condensing header. Full height at the top of the page, shrinking to a compact bar after a set scroll distance. Popular on ecommerce. Animate height, not layout-shifting content.
3. Delayed sticky. The header is static for the first screen, then a slim version appears after roughly 600 to 800 pixels of scroll. Good for hero-driven landing pages.
4. Sticky CTA only. No navigation persists, just one button or a bottom bar. Highest conversion focus, lowest distraction.
5. Section-scoped sticky. Using position: sticky inside a container so a sub-nav sticks only while its section is on screen. Excellent for long service pages with multiple offers.

How to test it instead of guessing

Header behaviour is cheap to test and the results are usually clear within a couple of weeks on a medium traffic site. joshwcomeau.com makes the same point with more data.

• Segment by device. Sticky often wins on desktop and loses on mobile. A pooled result hides that.
• Primary metric: conversion rate per session on the template you changed, not sitewide.
• Secondary metrics: scroll depth at 50 and 75 percent, CTA click rate by position, exit rate, and navigation click rate from the header.
• Watch session recordings for two behaviours: users pinch-zooming to see content behind the bar, and anchor clicks followed by immediate manual scrolling (a sign your offsets are wrong).
• Check Core Web Vitals. A badly built sticky header that resizes on scroll can hurt CLS and INP. Animate with transform, never with height or top on every scroll event.

Implementation checklist

1. Use position: sticky; top: 0; on the <header>, and make sure no ancestor has overflow: hidden, which silently breaks stickiness.
2. Set a sensible z-index and verify it against modals, dropdowns and cookie banners.
3. Add scroll-padding-top on html matching the header height, per breakpoint.
4. Cap mobile header height at 56 to 64px and use dvh units for any full-height hero to account for changing browser chrome.
5. Disable stickiness when max-height: 480px or when the user has set prefers-reduced-motion if your header animates.
6. Tab through a full long page and confirm the focus ring is never hidden.
7. Test at 200 and 400 percent browser zoom.
8. Confirm the skip link target is not covered.
9. Run one sticky layer only. Audit promo bars, filter bars, chat widgets and consent banners together.
10. Re-check anchor links after any header height change. This is the single most common regression.

Common mistakes we see on audits

• A 120px sticky header on mobile that eats a fifth of the screen.
• Sticky header plus sticky promo bar plus sticky chat bubble, leaving a thin strip of content.
• Anchor targets hidden behind the bar on one-page sites.
• Full navigation persisting through checkout.
• A sticky header with no CTA, which means the cost is paid and the benefit never collected.
• Header that grows and shrinks on every scroll tick, causing jank and layout shift.
• Mobile dropdown menus that open inside a fixed header and cannot be scrolled, so the last items are unreachable.

The short answer

Sticky headers are neither good nor bad. They trade screen space for permanent access. Make that trade when the page is long, the header is slim and it carries a real CTA. Avoid it when the page is short, the content is visual, the user is in a funnel, or the header cannot be kept small enough on mobile. Then make sure your anchor offsets and zoom behaviour are handled, because that is where most sticky implementations quietly fail.

FAQ

What is a sticky header for a website?

A sticky header is a navigation bar that stays visible at the top of the screen as the visitor scrolls down the page, so the logo, menu, search and primary CTA remain reachable at any scroll depth. It is also called a fixed or persistent header.

Is a sticky header good or bad for SEO?

It is neutral for crawling and indexing, since the links are in the HTML either way. It can affect SEO indirectly through user experience signals and Core Web Vitals. A sticky header that causes layout shift or covers content on mobile can hurt, while a slim, well built one has no negative effect.

How do I make my header sticky?

In CSS, apply position: sticky and top: 0 to your header element, plus a z-index so it sits above the content. Ensure no parent element has overflow: hidden. In WordPress with a block theme, open Appearance then Editor, select the template, choose the Header template part in List View, and enable the sticky position option in the block settings. Most page builders and Shopify themes expose the same setting under header layout.

What is the difference between a sticky header and a fixed header?

position: fixed pins the element to the viewport permanently and removes it from the document flow, which means content can slide underneath it. position: sticky keeps the element in the flow and only pins it once the scroll position reaches the defined offset, and it stops sticking at the end of its parent container. For site headers, sticky is usually the better choice.

How tall should a sticky header be?

Aim for 56 to 64 pixels on mobile and 64 to 80 pixels on desktop, and never more than about 10 percent of the viewport height. If your design cannot fit inside that, use a condensed version that appears after the first scroll.

Do sticky headers cause accessibility problems?

They can. The main issues are anchor links landing behind the bar, keyboard focus being hidden, and the header consuming too much space at high zoom levels or on short viewports. All three are fixable with scroll-padding-top, scroll-margin-top and a max-height media query that disables stickiness.

Should a one-page website use a sticky header?

Yes, in most cases, because anchor navigation is the only way to move around the page. Just keep it slim and set the scroll offset carefully so section headings are never hidden when a menu item is clicked.