I'm facing an issue with implementing the Sticky-top function on a navbar within a Django project. The navbar is responsive and can be expanded by clicking a button, but I want it to remain fixed at the top when the user scrolls down.
Currently, I am using the following code:
<div id="navBar"><!--Navigation Bar-->
<nav class="navbar navbar-expand-lg navbar-light sticky-top" id="mainNavbar" >
<div class="container">
<a class="navbar-brand"></a>
<a class="navbar-brand" ></a>
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" id="collapse-button"data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent"
aria-expanded="false" aria-label="Toggle navigation">
<span>Menu</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ml-auto">
<li class="nav-link" >
<a href="home">Home</a>
</li>
<li class="nav-link">
<a href="contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>