Double navigation with 2 navbars
Bootstrap 5 Double navigation with 2 navbars component
Responsive Double navigation with 2 navbars built with Bootstrap 5. Advanced Double Navigation with fixed SideNav and Navbar.
Basic example
Use the .fixed-top
class in the <nav>
element to make your navbars always visible on top. To make the second navbar visible, just add the style margin-top: *px
(*height of your first navbar).
Add sidebar toggle in your navbar and data-mdb-hidden="true"
next to .sidenav
class to hide your sidenav until the button is pressed.
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-sm navbar-light bg-dark navbar-dark">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Left links -->
<ul class="navbar-nav flex-row">
<li class="nav-item me-2 me-lg-0">
<a class="nav-link text-white" href="#" role="button" data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1" data-mdb-ripple-init class="btn shadow-0 p-0 me-3" aria-controls="#sidenav-1" aria-haspopup="true">
<i class="fas fa-bars me-1"></i>
</a>
</li>
<li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">
<a class="navbar-brand">Material Design for Bootstrap</a>
</li>
</ul>
<!-- Left links -->
<ul class="navbar-nav d-flex flex-row me-1">
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-envelope me-1"></i>Contact</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-comments me-1"></i>Support</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-user-alt me-1"></i>Account</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- Container wrapper -->
</nav>
<nav class="navbar second-navbar fixed-top navbar-expand-sm navbar-light bg-primary navbar-dark">
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Left links -->
<ul class="navbar-nav flex-row">
<li class="nav-item me-2 me-lg-0">
<a class="nav-link text-white" href="#" role="button" data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1" data-mdb-ripple-init class="btn shadow-0 p-0 me-3" aria-controls="#sidenav-1" aria-haspopup="true">
<i class="fas fa-bars me-1"></i>
</a>
</li>
<li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">
<a class="navbar-brand">Material Design for Bootstrap</a>
</li>
</ul>
<!-- Left links -->
<ul class="navbar-nav d-flex flex-row me-1">
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-envelope me-1"></i>Contact</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-comments me-1"></i>Support</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><i class="fas fa-user-alt me-1"></i>Account</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a data-mdb-dropdown-init class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- Container wrapper -->
</nav>
<!-- Sidenav -->
<div id="sidenav-1" data-mdb-sidenav-init class="sidenav" role="navigation" data-mdb-hidden="true" data-mdb-accordion="true">
<ul class="sidenav-menu">
<li class="sidenav-item">
<a class="ripple d-flex justify-content-center py-4" style="border-bottom: 2px solid #f5f5f5;" href="#!" data-mdb-ripple-color="primary">
<img id="MDB-logo" src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" alt="MDB Logo" draggable="false" />
</a>
</li>
<!--social media -->
<li class="sidenav-item py-2" style="border-bottom: 2px solid #f5f5f5;">
<div class="d-flex justify-content-center">
<a href="#"><i class="fab fa-facebook-f mx-2 my-2 text-dark"></i></a>
<a href="#"><i class="fab fa-pinterest-p mx-2 my-2 text-dark"></i></a>
<a href="#"><i class="fab fa-google-plus-g mx-2 my-2 text-dark"></i></a>
<a href="#"><i class="fab fa-twitter mx-2 my-2 text-dark"></i></a>
</div>
<!--social media -->
</li>
<li class="sidenav-item p-3" style="border-bottom: 2px solid #e0e0e0;">
<div data-mdb-input-init class="form-outline">
<input type="search" id="form1" class="form-control" />
<label class="form-label" for="form1">Search</label>
</div>
</li>
<li class="sidenav-item">
<a class="sidenav-link"><i class="fas fa-layer-group pe-3 text-dark"></i><span>Categories</span></a>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link">Dresses</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Shirts</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Jeans</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Shoes</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Accessories</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Jewelry</a>
</li>
</ul>
</li>
<li class="sidenav-item">
<a class="sidenav-link"><i class="fas fa-gem pe-3 text-dark"></i><span>Brands</span></a>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link">Brand 1</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Brand 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Brand 3</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Brand 4</a>
</li>
</ul>
</li>
<li class="sidenav-item">
<a class="sidenav-link"><i class="fas fa-gift pe-3 text-dark"></i><span>Discounts</span></a>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link">-70%</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">-50%</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Any</a>
</li>
</ul>
</li>
<li class="sidenav-item">
<a class="sidenav-link"><i class="fas fa-fire-alt pe-3 text-dark"></i><span>Popular</span></a>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link">Jewelry</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Snickers</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- Sidenav -->
</header>
<!--Main Navigation-->
.navbar.second-navbar {
margin-top: 59px;
z-index:1
}
.dropdown-menu {
z-index:2
}