Prevent a header from overlapping a scroll/anchor link on HubSpot

If you're scrolling to an anchor link on a HubSpot page, you may find that you need to offset it by adding some additional space above. For example:

• You have a fixed or sticky header and your scroll link is appearing behind it
• There's no whitespace between the top of the page and the anchor link

Luckily, there's a relatively new CSS property called scroll-margin-top that you can use to do this.

In HubSpot, anchor links you insert into the page in a Rich Text editor (from Insert > Anchor Link) look like this in the HTML:

<a id="anchor-link" data-hs-anchor="true"></a>

So you can target links with data-hs-anchor="true" in your CSS, like this:

a[data-hs-anchor="true"] {
  scroll-margin-top: 2.5rem;
}

In this case we've used an offset of 2.5rem, but you could use any other measurement (e.g. 40px).

If you have any other type of anchor links (e.g. in a custom module), you could also use the scroll-margin-top property to offset them.