CodeNewbie Community

Cover image for How to not cut off the top of your section when using anchor tags
𝕁𝕦𝕝𝕚𝕒 👩🏻‍💻
𝕁𝕦𝕝𝕚𝕒 👩🏻‍💻

Posted on • Updated on

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 (2)

Collapse
andrewbaisden profile image
Andrew Baisden

Useful tip.

Collapse
mickdollentas profile image
Mickey

Just what I was looking for, thank you so much!