Sticky Headers - Yes or No? What Users Actually Want

Stop faffing about with what looks good and start paying attention to what actually works. Sticky navigation headers are everywhere because somebody once decided they were the answer to every website’s navigation problem.

But are they?

Most of them are unhelpful design fluff, taking up screen space that content should occupy whilst pretending to help users who don’t need the help.

Your Sticky Header might be Pissing Off Users

Here’s what the usability research actually says about sticky headers, what giants like Amazon do differently, and why your current approach is probably wrong.

The Permanently Sticky Header Problem

Nielsen Norman Group tested permanently visible sticky headers and found they do save users roughly 22% of navigation time. Users preferred them, though most couldn’t explain why. The constant access to navigation, search, and key features without scrolling back to the top matters on content-heavy sites and eCommerce platforms.

But here’s the catch: permanently sticky headers eat screen real estate. On mobile, where space is already tight, they’re a nightmare. Users who zoom in find the sticky header expands to fill most of the viewport, leaving bugger all room for actual content. Keyboard users suffer too, their focus point disappearing behind the fixed header as they tab through elements.

NNG research makes it clear: if you’re going to use a permanently sticky header, it must be as small as possible whilst maintaining readable text (16pt minimum) and proper tap targets (1cm × 1cm minimum on touchscreens). Most sites don’t bother with this level of restraint. They slap a massive header up there and call it done.

The Scroll-Up Triggered Alternative

Partially persistent headers (the ones that disappear when you scroll down but reappear when you scroll back up) try to split the difference. NNG defines these as appearing at the top as soon as the user starts scrolling upward, even slightly. The logic is sound: any upward scroll typically signals the user wants navigation or has finished with the current content section.

The weakness? Sometimes users scroll up to reread a paragraph or check a detail, not to access navigation. In those moments, the appearing header becomes an unwanted obstruction. UX experts recommend implementing this with a slide-in animation of roughly 300-400ms so it feels natural rather than jarring, as though it’s being manually scrolled into view.

This approach works well enough when implemented properly. But “properly” is doing a lot of work in that sentence.

When No Sticky Header Is the Right Answer

NNG’s broader research on scrolling behaviour found that 74% of viewing time is spent in the first two screenfuls (up to 2160px), with attention dropping sharply after that. This suggests that on shorter pages, sticky headers solve a problem that doesn’t exist.

On content-focused pages (articles, blog posts, documentation) where the primary task is reading rather than jumping between sections, sticky headers primarily obstruct rather than assist. Users have become thoroughly conditioned to scroll and understand navigation sits at the top of the page when needed. The interaction cost of scrolling has decreased significantly. Users are perfectly capable of scrolling back to the top when they actually need navigation rather than having it permanently occupying screen space.

NNG’s guidance implies sticky headers should only be implemented when genuinely beneficial: “when implemented poorly, sticky headers are annoying, distracting, and obstruct page content.” If the page doesn’t genuinely benefit from constant navigation access, don’t use one.

What Amazon Actually Does

Amazon knows something most website owners don’t: the search bar is always stickyat the top on both mobile and desktop product pages. That’s deliberate. Amazon’s data shows users are highly likely to refine, repeat, or change searches even after landing on a results page, so keeping search visible at all times prevents wasted scrolls and lost intent.

The rest of Amazon’s navigation (department links, account details, etc.) stays tucked away. But the bottom bar in the app is permanently visible, offering quick access to home, account, and the primary navigation shortcut. These choices aren’t aesthetic decisions. They’re based on observed user behaviours.

Amazon focuses on just the most important control when using sticky navigation. Not every bloody link. Not the entire header. Just what users do most.

The Five-Item Rule Nobody Follows

Research shows sticky headers are most effective when they contain no more than five items. Anything beyond that requires overflow menus or becomes unwieldy. The items displayed should map directly to users’ most frequent tasks, not just dump every possible link into a persistent bar.

Most websites ignore this completely. They cram logos, full navigation menus, search bars, account links, shopping carts, social media icons, and whatever else they can fit into a sticky header, then wonder why it feels cluttered and users complain.

Strip it back. What do your users actually need constant access to? If the answer is “everything,” the answer is wrong.

Context Matters More Than Preference

The “right” choice depends entirely on what users actually do on your site. If the primary job is conveying information without much navigation (blog posts, articles), sticky headers add little value and mostly obstruct content. But on long landing pages, product pages with tabs, comparison tables, or sites where users frequently jump between sections, sticky navigation genuinely improves the experience.

You can’t copy what Facebook does and expect it to work on your small business website. Facebook’s navigation choices are informed by billions of user interactions. Yours aren’t. So test, measure, and pay attention to what users actually do rather than what you think looks modern.

What You Should Actually Do

Use permanently sticky headers when navigation access genuinely improves task completion on long, navigation-heavy pages. Consider partially sticky (scroll-up triggered) headers as a compromise that reduces obstruction whilst maintaining quick access. Skip sticky headers entirely on content-focused pages where reading is the primary task.

And for crying out loud, if you do use a sticky header, keep it small and relevant. Nobody needs your entire navigation menu following them down the page.

Questions Answered about Sticky Headers

Should I Use A Sticky Header On A Blog Or Content Site?

No, probably not. If your primary job is delivering content that people read (articles, blog posts, case studies), a sticky header mostly gets in the way. Users can scroll back to the top when they actually need navigation, which on content sites is rarely whilst they’re reading.

Keep it between 60–80 pixels, with 70px being the sweet spot for most sites. Make sure all tap targets are minimum 1cm × 1cm and text is at least 16pt. Anything larger eats too much screen space and pisses off users trying to read your content.

No more than five. Any more than that and you’re creating cognitive overload whilst taking up valuable screen space. Focus on what users actually need constant access to—not every bloody link you think is important.

It depends entirely on what users do on your site. For eCommerce platforms, comparison sites, or pages where users frequently jump between sections, yes. For straightforward content consumption, no. Test it properly rather than copying what you think looks modern.

What’s The Difference Between Sticky And Partially Sticky Headers?

A sticky header stays visible all the time. A partially sticky header disappears when you scroll down but reappears when you scroll back up, even slightly. The partially sticky approach saves screen space whilst still giving quick access to navigation when users signal they want it.

Only if you’ve got internal politics forcing a massive logo at the top. The shrinking animation should be quick (roughly normal scrolling speed) and smooth, not jarring or delayed. Better still, start with a properly sized header that doesn’t need to shrink at all.

No. Transparent or translucent sticky headers create contrast problems as they appear over different page content. Your header needs an opaque background colour that’s clearly differentiated from your content everywhere on the page, otherwise it becomes unreadable and annoying.