How To Place Navbar Below Sticky Navbar Using Bootstrap 4?

I am using bootstrap 4 to make an application, in which i have two navbars and both needs to be fixed at top in which the second navbar needs to hide while scrolling. Html: Navbar

Solution 1:

Use sticky-top on the 1st instead of fixed-top, and make the 2nd navbar static by removing fixed-top.

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-custom-light"></nav>
<nav class="navbar navbar-expand-md bg-dark navbar-dark"></nav>

Demo: https://www.codeply.com/go/vbF0Sch9xc

---

Related:
Bootstrap 4 collapsing two navbars into one toggle button
Bootstrap 4 Multiple fixed-top navbars