About Anchor Links on Pages with Fixed Top Navigation

When using fixed top navigation, the navigation covers the top of the page and all anchors are covered by default. To fix that visually, give the anchor relative positioning and negative top placement, like this:

Link HTML:

<a href="#faq">FAQ</a>

Section HTML:

<section>
    <a class="section-anchor" id="faq">⚓️</a>
    <h1>Frequently Asked Questions</h1>
    …
</section>

CSS:

.section-anchor {
    position: relative;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    top: -3em; /* minus the height of the top navigation */
}