CodeNewbie Community

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

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.

Preview of the problem

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;
}
Enter fullscreen mode Exit fullscreen mode

index.html

<section id="section-id">
  <div>
    CONTENT
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

If you want to take a look at my website πŸ‘‰ https://julia-undeutsch.netlify.app/


Thank you

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

Discussion (0)