Sticky headers: helpful or in the way?

Key takeaways

A sticky header stays at the top of the screen as visitors scroll, keeping the menu and contact action in reach. It helps on long pages and sites where visitors navigate a lot. It gets in the way when it is too tall, covers content, animates distractingly or hides text when a visitor jumps to a link. Keep it compact and simple.

• Keep a sticky header compact, especially on phones.
• Include the logo, menu or menu button and one contact action.
• Avoid headers that jump, flicker or change size abruptly.
• Make sure it never covers focused links or anchor targets.

What is a sticky header?

A sticky, or fixed, header is a site header that remains visible at the top of the browser window while the page scrolls underneath it. Some show all the time; others hide when scrolling down and reappear when scrolling up.

• The most common business website design mistakes
• Website navigation best practices

When does a sticky header help?

Sticky headers help on long pages, such as service pages, product listings and guides, where scrolling back to the top to navigate or call would be a chore. Nielsen Norman Group notes they can be useful when visitors often need the navigation, as long as they are designed to minimise distraction.

When does a sticky header get in the way?

A tall sticky header permanently takes part of the screen. On a phone in landscape it can cover a large share of the view. Headers that animate on every scroll movement are distracting, and some cover the target when a visitor follows a link to a section further down the page.

• Too tall, with a large logo, a promotional bar and a menu.
• Jumps or changes size abruptly as you scroll.
• Covers the heading of a section linked from the contents.
• Covers the link or form field a keyboard user has tabbed to.
• Stacks with a cookie banner or sticky call-to-action bar.

How tall should a sticky header be?

As compact as possible while staying readable and easy to tap. Many sites shrink the header slightly once scrolling begins. On phones, aim to keep it to a small fraction of the screen, and consider showing it only when visitors scroll up.

• Website logo placement and size: what visitors expect

What should a sticky header contain?

The logo linking home, the menu (or a menu button on mobile) and one primary contact action, such as call, WhatsApp or book. Leave out promotional banners, social icons and secondary links. Do not combine a sticky header with a separate sticky call-to-action bar on mobile without checking how much screen is left.

• Sticky call-to-action bars on mobile: when they work

What are the accessibility considerations?

WCAG 2.2 includes a criterion, Focus Not Obscured, requiring that a focused element is not entirely hidden by sticky content. Test by tabbing through the page with the keyboard: every link and field should stay visible. Also check that the header still works when text is enlarged or the page is zoomed.

• Keyboard accessibility: can your site work without a mouse?

What does this look like in practice?

A pattern we see: a sticky header with an announcement bar, a large logo and a menu takes up a big slice of a phone screen, and a cookie banner covers the bottom. Removing the announcement bar and shrinking the logo restores most of the screen for content.

• See client work
• Website Design & Development for UK businesses
• Website design review: score your own site in 30 minutes

Sticky header checklist

• Keep it compact, especially on phones.
• Include logo, menu and one contact action.
• Remove promotional bars from the sticky area.
• Avoid abrupt animations.
• Check focused links are never hidden.
• Check anchor links do not land under it.

Next step

Scroll your longest page on a phone and estimate how much of the screen the header covers.