I am facing an issue with the navbar-fixed-top element as it is causing content to be hidden from the container.
To resolve this common problem, you can add the following CSS code:
body { padding-top: 70px; }
After applying the above code, the container is no longer hidden by the navbar when the page is loaded. However, an issue arises when trying to navigate to a specific item on the page using a href=#item. In such cases, the item remains hidden behind the navbar.
I have created a simplified example on Codeply to demonstrate this problem. When clicking on "Got to test3", the item
<h2 class="font-weight-light">TEST3</h2>Below is the code snippet:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
HELLO NAVBAR
</nav>
<div class="container py-2">
<div class="row">
<div class="col">
<div class="sidebar-sticky" id="menu">
<ul class="nav flex-column">
<li class="nav-item">
<a href="#test">Go to test1</a>
</li>
<li class="nav-item">
<a href="#test2">Go to test2</a>
</li>
<li class="nav-item">
<a href="#test3">Go to test3</a>
</li>
<li class="nav-item">
<a href="#test4">Go to test4</a>
</li>
</ul>
</div>
</div>
<div class="col">
<div id="test">
<h2 class="font-weight-light">TEST1</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test2">
<h2 class="font-weight-light">TEST2</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test3">
<h2 class="font-weight-light">TEST3</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test4">
<h2 class="font-weight-light">TEST4</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
</div>
</div>
</div>