Should You Use a Sticky Header?

In short

Use a sticky header when visitors navigate frequently mid-page, such as on e-commerce, documentation, dashboards and long multi-section sites, and keep it small. Avoid one, or make it hide on scroll-down and reappear on scroll-up, on content-led pages and on mobile, where a fixed bar can take a fifth of the screen. The persistent element that most often earns its place is not the whole header but a single call to action.

A sticky, or fixed, header stays visible as the page scrolls. The benefit is that navigation, search, the cart, or the main call to action are always one tap away. The cost is that the header occupies part of every screen the visitor ever sees on the site, permanently, whether or not they want to navigate.

On a large desktop monitor the cost is small: a 70-pixel bar on a 1,000-pixel-tall viewport is seven percent. On a phone it is not: the same bar on a 660-pixel viewport is over ten percent, and with the browser's own chrome and an on-screen keyboard the remaining content area can shrink to half the screen. Add a cookie banner and a chat bubble and the page is a letterbox.

So the question is: how often does a visitor want the header, and what are they giving up the rest of the time?

Where it helps

Sites people navigate constantly. E-commerce, where the search box and the cart are used on every page. Documentation, where the sidebar or section switcher is the primary way of moving around. Dashboards and web applications, where the header holds the app's controls.

Long pages with sections. A one-page site or a long landing page benefits from a compact sticky bar with section links, because it replaces scrolling back to the top.

Pages where a single action matters. A sticky "Book now" or "Add to cart" button, on its own or in a slim bar, consistently outperforms one that scrolls away. This is the strongest case for stickiness, and it does not require sticking the whole header.

Where it hurts

Reading. Articles, case studies, anything a visitor is reading top to bottom. They do not want to navigate; they want the words, and a fixed bar reduces how many they see and adds a visual distraction at the top of every scroll.

Mobile generally. Screen space is the scarce resource. A full-height sticky header with a logo, navigation icon and search bar is often the largest thing on the screen apart from the content it is obscuring.

Pages with anchor links. Fixed headers cover the top of any section jumped to with an anchor, so the heading the visitor clicked toward is hidden under the bar. This is fixable with scroll-margin-top, and it is almost never fixed.

Performance and layout. A fixed element with a shadow, a blur, or a transparency effect is repainted on every scroll frame. On mid-range phones this produces the juddering scroll that makes a site feel cheap.

The patterns that resolve the trade-off

Shrink on scroll. A full header at the top of the page that collapses to a slim bar, perhaps 48 pixels, once the visitor scrolls. Keeps the essentials reachable at a fraction of the cost.

Hide on scroll down, show on scroll up. The visitor reading downward gets the full screen; the moment they scroll back up, which is the signal they want something above, the header returns. This is the best general-purpose behaviour for content sites and it is what most large publishers now do.

Sticky action, not sticky header. On product, pricing and booking pages, let the header scroll away and keep only the primary call to action fixed, usually at the bottom of the screen on mobile where the thumb is.

Contextual bars. A sticky table of contents on a long article, a sticky filter bar on a listing page. Persistent because it is useful on that page, not because the template has it.

Implementation details that go wrong

Anchor offsets. Set scroll-margin-top on headings equal to the header height, or every in-page link lands under the bar.
Height in the layout. position: sticky keeps the header in the document flow and avoids the content-jumps-under-it problem that position: fixed creates. Prefer it.
Focus and keyboard users. When a keyboard user tabs to an element, the browser scrolls it into view, and a fixed header can cover it. Test with the keyboard.
The mobile keyboard. A fixed header plus an on-screen keyboard can leave a form field with almost no visible space. Consider un-sticking the header when an input is focused.
Effects. Avoid backdrop blur and heavy shadows on the fixed element, or accept the scroll performance cost knowingly.
Reduced motion. Shrink and hide animations should respect prefers-reduced-motion.

How to decide for a given site

Look at how visitors actually move. If analytics and session recordings show people using the header navigation on most pages, it has earned its place. If they arrive from search, read one page, and leave or convert, the header is decoration, and the space is worth more as content. Most marketing sites are the second kind and would do better with a hide-on-scroll bar and a sticky call to action than with a permanent full header.

A related question is what goes in the header at all; our piece on designing a navigation menu covers that. If you would like a view on a specific site, book a call and bring the scroll-depth data.

Common questions

Are sticky headers bad for mobile?

A full-size one usually is, because it can occupy ten to twenty percent of a phone screen on every scroll, more with a cookie banner and keyboard. The better mobile patterns are a slim bar that shrinks on scroll, a header that hides on scroll-down and returns on scroll-up, or a single sticky call-to-action button at the bottom of the screen.

Do sticky headers improve conversions?

A sticky primary action button often does; a sticky full header rarely does on its own. The persistent element that helps is the one thing the visitor needs to act, such as 'Add to cart' or 'Book', kept reachable while the rest of the header scrolls away. Test the button alone before fixing the whole bar.

Is a sticky header bad for SEO?

Not directly. The indirect risks are performance, since a fixed element with blur or shadow effects can make scrolling jerky on phones and worsen Interaction to Next Paint, and layout shift if it is implemented with position: fixed without reserving its height. Google also treats intrusive elements that obscure content on mobile as a quality signal, so keep it small.

What is the difference between position: sticky and position: fixed for a header?

Fixed removes the header from the document flow, so content slides under it and you must add padding to compensate. Sticky keeps it in flow until the page scrolls past it, then pins it, which avoids the padding problem and the layout shift. Sticky is the better default for headers in almost every case.

How tall should a sticky header be?

As small as it can be while remaining tappable: roughly 48–64 pixels once scrolled, even if the header at the top of the page is taller. Anything over about 80 pixels fixed on mobile takes a disproportionate share of the screen. Shrinking on scroll gives you both a full header at the top and a slim one in use.

UXproduct designCSS