Question posted in 
I am currently working on a project to learn and am very new to this. I ran into this issue:
When I use to jump to a header of the page, the title of that header is blocked by the navbar. In this example, when I click ‘Texas’, the title is hidden. How can I fix this without greatly altering how my navbar is built?
.topnav {
background-color: #000000;
position: sticky;
top: 0;
min-height: 62px;
z-index: 999999;
padding-bottom: 40px;
}
.topnav a {
list-style-type: none;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
}
.topnav .icon {
display: none;
} <div class="topnav" id="myTopnav">
<a href="#">THIS IS A NAVBAR</a>
</div>
<h1>LOCATIONS</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venim,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cos
equat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non prod
ent, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<div class="container">
<h3>Contents</h3>
<ol type="1">
<li><a href="#h2_texas">Texas</a></li>
<li><a href="#h2_florida">Florida</a></li>
<li><a href="#h2_california">California</a></li>
</ol>
</div>
<h2 id="h2_texas">Texas</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt
empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cos
equat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non prod
ent, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h2 id="h2_florida">Florida</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt
empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cos
equat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non prod
ent, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h2 id="h2_california">California</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt
empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo con
equat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillm
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non prod
ent, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
5
Answers
I found this problem very interesting , I took a local copy and checked , I have added below snippet into the css and it is working perfectly fine.
You have a fixed navbar that is too wide.
You can add another anchor to an element with no text(or hidden) in it before the actual header you want to jump to – but this is crappy solution. – or by having the bar shrink once you’ve scrolled past its initial appearance.
The script listens for click events on all anchor links (a[href^="#"]) and prevents the default behavior. It then calculates the position of the target element and scrolls to it, considering an offset (-100 pixels) to account for the navbar height. Adjust the -100 value according to your navbar height.
‘smooth’ property ensures a smooth scrolling animation to the target element.
You should put the
.containerclass top of the.topnavclass. After that navbar is sticky and anchor tag is working fine. Additionally if you want to see the navbar top of the page after clicking the anchor text you can use:You can use the
:targetselector to select the targeted element and addpadding-topto the height of the navbar. However, this will only work if you know the height of the navbar before and the navbar is calculated asborder-box. If you do not know that before, you have to use JS to set the variable for the offset dynamically: