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" 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 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" 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 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" 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 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 
      }