Fixing Anchor Links Behind Sticky Headers

6 March 2023 · Updated 29 September 2025

cssweb-developmentanchor-linkssticky-headersscroll-paddingpseudo-elements

Sticky and fixed headers cover anchor link targets when you click them. Two CSS fixes.

Modern: scroll-padding

html {
  scroll-padding-top: 200px;
}

Set it on the scroll container (usually html). Shipped in every major browser since 2019.

Per-target: a pseudo-element

:target::before {
  content: "";
  display: block;
  height: 200px;       /* fixed header height */
  margin: -200px 0 0;  /* negative fixed header height */
}

An invisible block on the :target element pulls the scroll position above where the header would cover.