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
}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-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-->Related resources
Navbar tutorial
Sticky navbar tutorial
Animated navbar tutorial
Logo tutorial
Sidebar Layout Sections
Blog Navigation Sections
eCommerce Navigation Sections
Admin Navigation Sections
Free Admin Template
Free Image Full Cover Template
Free Video Full Cover Template
Vertical Navbar
Navbar brand
Dropdown language selector
Navbar with icons
Sticky footer
Dropdown with notification
Mobile menu
Header with logo
Side Navbar
Jumbotron
Hamburger Menu
Nested Dropdown
How to make Bootstrap Navbar transparent
How to center Bootstrap Navbar
How to change Bootstrap Navbar color
Breadcrumbs
Navbar generator
Bootstrap Navbar Tutorial
If you want to support our friends from TW Elements you can also check out the Tailwind navbar documentation.