Skip to Content

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: 

  • Perhaps you have a fixed or sticky header and your scroll link is appearing behind it
  • Perhaps you don't like how 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. 

←  Previous Article

Customize the embedded video in a HubSpot Video module


Get help from a HubSpot CMS Expert

  • Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules
  • Technical support and guidance on the HubSpot CMS