Anchors hidden under a sticky header

Clicking a table of contents link scrolls the heading right under your fixed header. One property fixes it.

SNP 090 #B13 Filed css

css
h2,
h3 {
  scroll-margin-top: 5rem;
}

Set it to your header's height plus a bit of air. It works for #anchor links, scrollIntoView() and the browser's "find in page".

Add smooth scrolling while you're there, but only for people who are fine with motion:

css
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}