Anchor link with a fixed header

Posted on 21. January 2015

If you have an anchor link on a page with a fixed header, the element linked to will disappear behind the fixed header. To fix this, you will have to add an invisible element before the element you are linking to with a height of the fixed header.

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

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