I have a simple web page with a navbar and some content.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a id="about" href="#first">First section</a></li>
<li><a id="about" href="#second">Second section</a></li>
</ul>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-12">
<img alt="this should be my image" />
<h3 id="first">The first section</h3>
<p>... content ...</p>
<h3 id="second">The second section</h3>
<p>... content ...</p>
</div>
</div>
</div>
The navbar links to sections in the same page. Whenever a link is clicked, the page scrolls to the targeted element but the content gets overlapped by the navbar. Concretely, if the link to the first section is clicked (First) the page gets scrolled to the first h3 element, but the element is actually rendered under the navbar element How can this be fixed? See fiddle for details -- decrease the height of the results panel to better see the problem.
A CSS only solution would be to add padding to the h3 id and a negative margin to remove the redundant whitespace. For example:
#first, #second {
padding-top: 200px;
margin-top: -200px;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments