Having two top navbars on a single page can be tricky. One is fixed in its position, while the other is sticky. But when scrolling down, the sticky navbar fails to stay on top of the fixed one:
https://i.sstatic.net/4mUAZ.png
Furthermore, as you scroll down, the sticky navbar simply disappears, leaving users stranded:
[
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg">
<a href="http://127.0.0.1:8000/"class="navbar-brand">My Django App</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="http://127.0.0.1:8000/"class="nav-link">Home Page</a></li>
<li class="nav-item"><a href="http://127.0.0.1:8000/signup" class="nav-link">Sign Up</a></li>
</ul>
</nav>
{% if data %}
<div class="row">
<div class="col col-lg-1"></div>
<div class="col col-lg-8">
<nav class="navbar sticky-top navbar-dark bg-dark ">
<a class="navbar-brand display-4">List of Users</a>
</nav>
</div>
</div>- The behavior changes after removing the row and col divs, resulting inhttps://i.sstatic.net/42xH5.png the scroll-down effect https://i.sstatic.net/IOJZj.png. However, this causes overlap with the Django brand; ideally, it should align at the center.
- Edit made to the code for the users' navbar:
<nav class="navbar sticky-top navbar-dark bg-dark">
<a class="navbar-brand display-4">List of Users</a>
</nav>