Anchor link with a fixed or sticky header

Updated on 30. January 2022

If you have an anchor link on a page with a fixed or sticky header, the element linked to will disappear behind the header. To fix this, you will have to add the property scroll-margin-top to the element which is supported on all major browsers.

Here is an example for a header with a height of 80 pixels:

h1, h2, h3, h4, h5, h6 { scroll-margin-top: 80px; }

If you want to support older browsers, you would have to add an invisible element before the element.

:before { content: ""; display: block; height: 80px; margin: -80px 0 0; }
Made with ♥️ and Gatsby © 2024