Sticky headers on phones: Crawl Audit check 107

Short answer: a header that stays on screen as you scroll keeps the menu close, but on a phone it permanently covers part of the page. Check 107 is informational and always passes. If the page seems to have a sticky header, the result reminds you to keep it compact.

What Crawl Audit checks

• Pass: the HTML contains position: sticky or position: fixed and a <header>, with a note to keep it compact on mobile.
• Pass: otherwise.

The catalogue describes this check as "under 15% of the viewport". Crawl Audit doesn't measure the header's height, because that needs the page drawn on a real screen.

What the research says

• Nielsen Norman Group: "Sticky headers inherently take up space on the screen that could be used for content, so it's important that you use that space responsibly. This factor is even more important on mobile devices".
• If you use one, "ensure that it is as small as reasonably possible, it has high contrast against the background, does not use gratuitous animation, does not obscure content, and does not distract your users."
• Sticky bars can also hide whatever has keyboard focus, which WCAG 2.4.11 lists as a common failure (check 138).

Keeping it compact

• Logo, menu button and one action. Drop taglines and second rows on mobile.
• Hide it while scrolling down and show it when scrolling up.
• Check on a small phone, about 360 pixels wide, that it takes no more than a small slice of the screen.

Sources

• Nielsen Norman Group, Sticky headers: 5 ways to make them better (2021), checked 6 October 2026.
• W3C, Understanding 2.4.11 Focus Not Obscured (Minimum).