Currently, I am utilizing bootstrap 4 to create an application that features two navbars. Both of these navbars are intended to be fixed at the top, with the second navbar hiding as the user scrolls down.
Here is the HTML code for the navbars:
Navbar 1:
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-custom-light">
<div class="container-fluid">
<div class="row w-100">
.... (Code for Navbar 1)
</div>
</div>
</nav>
Navbar 2:
<nav class="navbar fixed-top navbar-expand-md bg-dark navbar-dark">
.... (Code for Navbar 2)
</nav>
I am facing an issue where the two navbars overlap each other when the page is scrolled. You can see this problem by visiting this link: https://www.bootply.com/y8EfMpCMc4#.
I need assistance in properly positioning Navbar 2 below Navbar 1 with a fixed position (while also ensuring responsiveness). Specifically, Navbar 2 should collapse on small devices and align to the right of the Navbar 1's brand name "New Project".