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-button-init 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-button-init 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
}
Double navbar with center search
Instead of using 2 navbars, you can replace 1 with a jumbotron which will work the same.
.jpg){kind=small}
.jpg)
<!--Main Navigation-->
<header>
<!-- Jumbotron -->
<div class="p-3 text-center bg-white border-bottom">
<div class="container">
<div class="row">
<!-- Left elements -->
<div class="col-md-4 d-flex justify-content-center justify-content-md-start mb-3 mb-md-0">
<a href="#!" class="ms-md-2">
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="35" />
</a>
</div>
<!-- Left elements -->
<!-- Center elements -->
<div class="col-md-4">
<form class="d-flex input-group w-auto my-auto mb-3 mb-md-0">
<input autocomplete="off" type="search" class="form-control rounded" placeholder="Search" />
<span class="input-group-text border-0 d-none d-lg-flex"><i class="fas fa-search"></i></span>
</form>
</div>
<!-- Center elements -->
<!-- Right elements -->
<div class="col-md-4 d-flex justify-content-center justify-content-md-end align-items-center">
<div class="d-flex">
<!-- Cart -->
<a class="text-reset me-3" href="#">
<span><i class="fas fa-shopping-cart"></i></span>
<span class="badge rounded-pill badge-notification bg-danger">1</span>
</a>
<!-- Notification -->
<div class="dropdown">
<a data-mdb-dropdown-init class="text-reset me-3 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"
role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-bell"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Some news</a></li>
<li><a class="dropdown-item" href="#">Another news</a></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
<!-- Languages -->
<div class="dropdown">
<a data-mdb-dropdown-init class="text-reset dropdown-toggle me-3 hidden-arrow" href="#" id="navbarDropdown" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
<i class="flag flag-united-kingdom m-0"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="#"><i class="flag flag-united-kingdom"></i>English
<i class="fa fa-check text-success ms-2"></i></a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a class="dropdown-item" href="#"><i class="flag flag-poland"></i>Polski</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="flag flag-china"></i>中文</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="flag flag-japan"></i>日本語</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="flag flag-germany"></i>Deutsch</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="flag flag-france"></i>Français</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="flag flag-spain"></i>Español</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="flag flag-russia"></i>Русский</a>
</li>
<li>
<a class="dropdown-item" href="#"><i class="flag flag-portugal"></i>Português</a>
</li>
</ul>
</div>
<!-- User -->
<div class="dropdown">
<a data-mdb-dropdown-init class="text-reset dropdown-toggle d-flex align-items-center hidden-arrow" href="#"
id="navbarDropdownMenuLink" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle" height="22"
alt="" loading="lazy" />
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">My profile</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
<!-- Right elements -->
</div>
</div>
</div>
<!-- Jumbotron -->
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<!-- Container wrapper -->
<div class="container justify-content-center justify-content-md-between">
<!-- Left links -->
<ul class="navbar-nav flex-row">
<li class="nav-item me-2 me-lg-0">
<a class="nav-link" role="button" data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1"
data-mdb-button-init 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>
<span>Categories</span>
</a>
</li>
<li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">
<a class="nav-link" href="#">Bestsellers</a>
</li>
<li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">
<a class="nav-link" href="#">Inspirations</a>
</li>
<li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item me-2 me-lg-0 d-none d-md-inline-block">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<!-- Left links -->
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary" data-mdb-ripple-color="dark" type="button">
Download app<i class="fas fa-download ms-2"></i>
</button>
</div>
<!-- Container wrapper -->
</nav>
<!-- Navbar -->
<!-- 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="sidenav-link"><i class="fas fa-layer-group pe-3"></i><span>Categories</span></a>
<ul class="sidenav-collapse show">
<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"></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"></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"></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>
<li class="sidenav-item">
<a class="sidenav-link"><i class="fab fa-hotjar pe-3"></i><span>Today's bestseller</span></a>
<div class="card mx-3">
<div class="bg-image hover-zoom ripple" data-mdb-ripple-color="light">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(3).jpg"
class="w-100" />
<a href="#!">
<div class="mask">
<div class="d-flex justify-content-start align-items-end h-100">
<h5><span class="badge bg-danger ms-2">-10%</span></h5>
</div>
</div>
<div class="hover-overlay">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.15)"></div>
</div>
</a>
</div>
<div class="card-body">
<a href="" class="text-reset">
<p class="mb-2">Pink snickers</p>
</a>
<p class="mb-0">
<s>$61.99</s><strong class="ms-2 text-danger">$50.99</strong>
</p>
</div>
</div>
</li>
</ul>
</div>
<!-- Sidenav -->
<!-- Background image -->
<div id="intro"
class="bg-image shadow-1-strong"
style="background-image: url(https://mdbootstrap.com/img/new/slides/310.jpg); height: 500px;">
<div class="mask text-white" style="background-color: rgba(0, 0, 0, 0.6)">
<div class="container d-flex align-items-center justify-content-center text-center h-100">
<div class="text-white">
<h1 class="mb-3">Autumn sale</h1>
<h4 class="mb-4">Promotions up to 70%!</h4>
<a data-mdb-ripple-init class="btn btn-outline-light btn-lg mb-3" href="#!" role="button">See the promotional offer
<i class="fas fa-gem ms-1"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Background image -->
</header>
<!--Main Navigation-->