Add spacing above jump links on pages


TAGS: css

If you have a fixed header and try to link down the page, you often find the header gets eaten by the header. I've messed with this before and tried to find solutions with hacky JS scrolls or padding. Turns out there's a built in solution for this.

h3 {
  scroll-margin-top: 5rem; /* whatever is a nice number that gets you past the header */

This shouldn't affect the look of the site, just where you scroll to if you have this:

<a href="#pets">Scroll to pets</a>


<h2 name="pets">Pets</h2>

Learned this from this CSS Tricks article.