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>
You need to sign in to view this answers
Leave feedback about this