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!
Top comments (4)
Anchor tags are a great way to add text and images to your blog posts. They allow you to tag certain words or phrases, so that when someone searches for those words in their search engine, the article will show up in the results list. You can download beautiful templates about graphic design from this MasterBundles site. You can also use anchor tags for internal links, which is what I did in this post. When you use anchor tags, be sure not to cut off the top of your section. This will cause your site to look messy and unprofessional, since it won't look like it belongs on a blog.
Useful tip.
Just what I was looking for, thank you so much!