How to not cut off the top of your section when using anchor tags

When I created my personal portfolio, I used anchor tags in my sticky navigation bar to make it easy for readers to jump directly to the section they were interested in. But when working with a sticky navigation bar, the top of each section was cut off by the height of the navigation bar.

NEW APPROACH

Here's how I solved this problem

Add the scroll-margin-top property to the section and set the value equal to the height of the header.

style.css

.section-id {
  scroll-margin-top: 20vh;
}

index.html

<section id="section-id">
  <div>
    CONTENT
  </div>
</section>

OLD APPROACH
Create an anchor tag directly under each section, give it a class, and add the following properties to it:

style.css

.anchor {
  display: block;
  position: relative;
  top: -90px; /* this is your offset */
  visibility: hidden;
}

The offset depends on the height of your navigation bar.

Your sections in your HTML file should look like this:

index.html

<section id="section-id">
  <a class="anchor" id="anchor-id"></a>
  <div>
    CONTENT
  </div>
</section>

If you want to take a look at my website 👉 https://julia-undeutsch.netlify.app/

Thanks for your reading and time. I really appreciate it!