Sticky headers: keep navigation, search and cart in reach while scrolling
A header that stays visible while scrolling keeps search and cart close. See what a good sticky header does and what to avoid.
2 min read
Area
CRO & UX
Severity
High
Fix effort
Small
Stores failing
53%
Of 32 stores we scanned where this check applies, 53% fail it and 47% pass. See all benchmarks.
A sticky header stays on screen as the shopper scrolls, keeping the menu, search and cart within reach. On long category and product pages it saves repeated scrolling. This check scrolls your page and tests whether the header stays reachable.
Why it matters
Shoppers who must scroll to the top to reach the cart or search often do not. A header that returns on scroll up, or stays fixed in a compact form, keeps those actions close. A header that takes too much of the screen when fixed, however, hurts on phones.
What the audit looks at
The audit checks whether the header, with its cart and search, stays within reach as a shopper scrolls.
What usually causes it
- A theme without a sticky option enabled
- A large header that is disabled on mobile because it takes too much room
- An announcement bar that scrolls away and takes the header with it
- Custom scripts that break the sticky behaviour
How to fix it
Keep the header and navigation reachable while shoppers scroll. The effort is small, usually a setting or a paste and under 30 minutes.
- A header that stays at the top, or returns when the shopper scrolls up, keeps search, the cart and navigation one tap away.
- Keep it slim so it does not take much of a phone screen.
On Shopify
- Online Store > Themes > Customize, open the header section and look for a Sticky header option.
On WooCommerce
- Check the theme header settings under Appearance > Customize for a sticky or fixed header option.
How to check it yourself
- Scroll down a category page on your phone and scroll back up slightly.
- See whether the header returns.
- Check it does not cover content or buttons.
Frequently asked questions
Should the header stay fixed on mobile?
A compact fixed header or one that returns on scroll up works well. A tall fixed header wastes space.
Does a sticky header affect speed?
Not meaningfully when built with CSS.
Related checks
Check your own store
See whether your store passes this check
Paste your store URL. The audit loads your pages in a real browser and shows the result for this check with the evidence behind it.