Navbar

<!-- Basic navbar: Button (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 me-0 pe-lg-3 me-lg-4" href="#">
      <img src="path-to-logo" alt="Logo" width="130">
    </a>
    <div class="d-flex align-items-center order-lg-3">
      <a class="btn btn-primary d-sm-inline-block d-none ms-3" href="#">Sign up</a>
      <button class="navbar-toggler ms-2 me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse1" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <nav class="collapse navbar-collapse order-lg-2" id="navbarCollapse1">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
          <ul class="dropdown-menu">
            <li>
              <a class="dropdown-item" href="#">Action link</a>
            </li>
            <li class="dropdown">
              <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action link</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><a class="dropdown-item" href="#">Yet another link</a></li>
              </ul>
            </li>
            <li><a class="dropdown-item" href="#"> Another action</a></li>
            <li class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<!-- Basic navbar: Media toolbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 me-0 pe-lg-3 me-lg-4" href="#">
      <img src="path-to-logo" alt="Logo" width="130">
    </a>
    <div class="d-flex align-items-center order-lg-3">
      <a class="d-flex navbar-tool" href="tel:(405)555-0128">
        <i class="navbar-tool-icon ci-iphone"></i>
        <div class="ms-2 ps-1">
          <h6 class="navbar-tool-title">Call us</h6>
          <span class="navbar-tool-label">(405) 555-0128</span>
        </div>
      </a>
      <a class="d-flex navbar-tool" href="mailto:hello@example.com">
        <i class="navbar-tool-icon ci-chat"></i>
        <div class="ms-2 ps-1">
          <h6 class="navbar-tool-title">Talk to us</h6>
          <span class="navbar-tool-label">hello@example.com</span>
        </div>
      </a>
      <button class="navbar-toggler ms-2 me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse2" aria-expanded="false">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <nav class="collapse navbar-collapse order-lg-2" id="navbarCollapse2">
      <!-- Site menu goes here. See example above -->
    </nav>
  </div>
</header>

<!-- Basic navbar: Toolbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 me-0 pe-lg-3 me-lg-4" href="#">
      <img src="path-to-logo" alt="Logo" width="130">
    </a>
    <div class="d-flex align-items-center order-lg-3">
      <ul class="nav nav-tools flex-nowrap">
        <li class="nav-item align-self-center d-md-block d-none mb-0">
          <a class="nav-tool" href="#">
            <i class="ci-heart nav-tool-icon"></i>
            <span class="nav-tool-label">2</span>
          </a>
        </li>
        <li class="divider-vertical d-md-block d-none"></li>
        <li class="nav-item align-self-center mb-0">
          <a class="nav-tool pe-lg-0" href="#">
            <i class="ci-cart nav-tool-icon"></i>
            <span class="badge bg-success align-middle mt-n1 ms-2 px-2 py-1 fs-xs">4</span>
          </a>
        </li>
        <li class="divider-vertical d-lg-none d-block"></li>
        <li class="nav-item mb-0">
          <button class="navbar-toggler mt-n1 me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse3" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
          </button>
        </li>
      </ul>
    </div>
    <nav class="collapse navbar-collapse order-lg-2" id="navbarCollapse3">
      <!-- Site menu goes here. See example above -->
    </nav>
  </div>
</header>

<!-- Basic navbar: Search + toolbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 me-0 pe-lg-3 me-lg-4" href="#">
      <img src="path-to-logo" alt="Logo" width="130">
    </a>
    <div class="input-group ms-4 d-lg-block d-none order-lg-3" style="max-width: 21rem;">
      <i class="ci-search position-absolute top-50 end-0 translate-middle-y me-3 lead zindex-1"></i>
      <input class="form-control w-100 rounded" type="text" placeholder="Search for products...">
    </div>
    <div class="d-flex align-items-center order-lg-3">
      <ul class="nav nav-tools flex-nowrap">
        <li class="nav-item align-self-center d-lg-block d-none mb-0">
          <a class="nav-tool" href="#">
            <i class="ci-heart nav-tool-icon"></i>
            <span class="nav-tool-label">2</span>
          </a>
        </li>
        <li class="divider-vertical d-lg-block d-none"></li>
        <li class="nav-item mb-0">
          <a class="nav-tool align-self-center pe-lg-0" href="#">
            <i class="ci-cart nav-tool-icon"></i>
            <span class="badge bg-success align-middle mt-n1 ms-2 px-2 py-1 fs-xs">4</span>
          </a>
        </li>
        <li class="divider-vertical d-lg-none d-block"></li>
        <li class="nav-item mb-0">
          <button class="navbar-toggler mt-n1 me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse4" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
          </button>
        </li>
      </ul>
    </div>
    <nav class="collapse navbar-collapse order-lg-2" id="navbarCollapse4">
      <div class="input-group d-lg-none d-block">
        <input class="form-control w-100 ps-5 rounded-0 border-0" type="text" placeholder="Search for products...">
        <i class="ci-search fs-lg position-absolute top-50 end-0 translate-middle-y me-3 zindex-5"></i>
      </div>
      <!-- Site menu goes here. See example above -->
    </nav>
  </div>
</header>

<!-- Dark navbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container px-0 px-xl-3">
    ...
  </div>
</header>

<!-- Primary navbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container px-0 px-xl-3">
    ...
  </div>
</header>

<!-- Gray navbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-secondary">
  <div class="container px-0 px-xl-3">
    ...
  </div>
</header>

<!-- Light topbar -->
<div class="topbar bg-secondary">
  <div class="container d-flex justify-content-between px-0 px-xl-3">
    <div>
      <a class="topbar-link d-md-inline-block d-none" href="tel:(405)555-0128">
        Available 24/7 at 
        <span class='fw-bold'>(405) 555-0128</span>
      </a>
      <a class="topbar-link d-md-none d-inline-block" href="tel:(405)555-0128">
        <i class="ci-iphone me-1 align-middle"></i>
        (405) 555-0128
      </a>
    </div>
    <div>
      <div class="dropdown">
        <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
          <img class="me-2" src="path-to-flag-image" width="20" alt="English">
          Eng / $
        </a>
        <div class="dropdown-menu dropdown-menu-end">
          <a class="dropdown-item" href="#">
            <img class="me-2" src="path-to-flag-image" width="20" alt="Français">
            Français / €
          </a>
          <a class="dropdown-item" href="#">
            <img class="me-2" src="path-to-flag-image" width="20" alt="Deutsch">
            Deutsch / €
          </a>
          <a class="dropdown-item" href="#">
            <img class="me-2" src="path-to-flag-image" width="20" alt="Italiano">
            Italiano / €
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Dark topbar -->
<div class="topbar topbar-dark bg-dark">
  <div class="container d-flex justify-content-between px-0 px-xl-3">
    ...
  </div>
</div>

<!-- 2-level header: Topbar + Navbar -->
<header>

  <!-- Topbar -->
  <div class="topbar topbar-dark bg-dark">
    <div class="container d-flex justify-content-between px-0 px-xl-3">
      ...
    </div>
  </div>

  <!-- Navbar -->
  <div class="navbar navbar-expand-lg navbar-light bg-light navbar-shadow">
    <div class="container px-0 px-xl-3">
      ...
    </div>
  </div>
</header>