How can I make my navbar stay sticky at the top all the time while scrolling without the content of my cards overlapping it? I am using Bootstrap 5 and have tried setting the position to sticky and overflow to hidden, but the issue persists. Any suggestions?
nav {
background-color: black;
position: sticky;
overflow: hidden;
top: 0px;
padding: 0;
border: 2px solid green;
}
.nav {
color: lightgrey;
float: left;
margin: 1vw;
}<nav>
<a href="../../index.html" class="nav">Home</a>
<a href="./products.html" class="nav">Products</a>
<a href="./about.html" class="nav">About us</a>
<a href="./contact.html" class="nav">Contact</a>
</nav>
<main class="container">
<div class="row gy-3">
<div class="col-md-3">
<div class="card">
<img src="https://via.placeholder.com/99" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text
to build on the card title and make up the
bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</main>I also tried putting the image in a div inside the card with overflow:hidden, but that didn't solve the issue.