Fixed or Sticky Header Covering Content: How to Fix It

Fixed header covering content: how to fix it

A header with position: fixed floats above the page, so whatever sits under it is hidden: the first heading, and the top of every section you jump to with a link. On phones, where headers take a bigger share of the screen, it is even more noticeable.

2 min readUpdated 3 October 20264 fixes with code

Prefer position: sticky

A sticky header stays in the page flow, so it takes up its own space and still sticks to the top while scrolling. Content never starts underneath it.

header { position: sticky; top: 0; z-index: 50; }

If it must be fixed, add matching space

Give the page top padding equal to the header height. A CSS variable keeps the two in sync when the header gets taller on phones.

:root { --header-h: 64px; }
@media (max-width: 767px) { :root { --header-h: 56px; } }
header { position: fixed; inset: 0 0 auto; height: var(--header-h); }
body { padding-top: var(--header-h); }

Fix anchor links and in-page navigation

When a link jumps to a section, the section’s heading lands under the header. scroll-margin-top moves the stopping point down.

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

Watch for overflow: hidden

position: sticky silently stops working when an ancestor has overflow: hidden (or auto). If your sticky header or sidebar scrolls away, look for that on a parent, and use overflow: clip or overflow-x: clip instead.

Checklist

0 of 4 done

Header uses position: sticky where possible
Fixed headers have matching top padding
Anchor targets have scroll-margin-top
No overflow: hidden on ancestors of sticky elements

Questions

Why is my sticky header not sticking?

Usually an ancestor has overflow: hidden, overflow: auto or a fixed height. Sticky works relative to the nearest scrolling ancestor.

Fixed or sticky: which is better?

Sticky, in most cases: it keeps its space in the layout, so nothing slides underneath it.

How do I stop anchor links hiding under the header?

Add scroll-margin-top equal to the header height (plus a little breathing room) to the elements you link to.

Fixed header covering content: how to fix it

Prefer position: sticky

If it must be fixed, add matching space

Fix anchor links and in-page navigation

Watch for overflow: hidden

Checklist

Questions

Keep fixing

The right font size for mobile

Mobile form problems and how to fix them

How to fix horizontal scroll on mobile

Find these bugs before your client does