Navbar

<!-- Basic navbar -->
<header class="navbar navbar-expand-lg navbar-light shadow-sm">
  <div class="container">

    <!-- Brand -->
    <a class="navbar-brand d-none d-lg-block order-lg-1" href="#">
      <img width="142" src="path-to-logo" alt="Cartzilla"/>
    </a>
    <a class="navbar-brand d-lg-none me-2" href="#">
      <img width="74" src="path-to-logo" alt="Cartzilla"/>
    </a>

    <!-- Toolbar -->
    <div class="navbar-toolbar d-flex align-items-center order-lg-3">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-tool" href="#">
        <div class="navbar-tool-icon-box"><i class="navbar-tool-icon ci-search"></i></div>
      </a>
      <a class="navbar-tool ms-1 me-n1" href="#">
        <div class="navbar-tool-icon-box">
          <i class="navbar-tool-icon ci-user"></i>
        </div>
      </a>
      <a class="navbar-tool ms-3" href="#">
        <div class="navbar-tool-icon-box bg-secondary">
          <span class="navbar-tool-label">4</span>
          <i class="navbar-tool-icon ci-cart"></i>
        </div>
      </a>
    </div>

    <!-- Collapsible menu -->
    <div class="collapse navbar-collapse me-auto order-lg-2" id="navbarCollapse">
      <hr class="d-lg-none my-3">
      <ul class="navbar-nav">
        <li class="nav-item active"><a class="nav-link" 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" data-bs-auto-close="outside">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="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</header>

<!-- Dark navbar -->
<header class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <!-- Navbar content -->
  </div>
</header>

<!-- Accent navbar -->
<header class="navbar navbar-expand-lg navbar-dark bg-accent">
  <div class="container">
    <!-- Navbar content -->
  </div>
</header>

<!-- Custom color navbar -->
<header class="navbar navbar-expand-lg navbar-light" style="background-color: #f2f5fc;">
  <div class="container">
    <!-- Navbar content -->
  </div>
</header>

<!-- Light topbar -->
<div class="topbar topbar-light bg-secondary">
  <div class="container">
    <div class="topbar-text dropdown d-md-none">
      <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
      <ul class="dropdown-menu">
        <li>
          <a class="dropdown-item" href="tel:00331697720">
            <i class="ci-support text-muted me-2"></i>
            (00) 33 169 7720
          </a>
        </li>
        <li>
          <a class="dropdown-item" href="#">
            <i class="ci-location text-muted me-2"></i>
            Order tracking
          </a>
        </li>
      </ul>
    </div>
    <div class="topbar-text text-nowrap d-none d-md-inline-block">
      <i class="ci-support"></i>
      <span class="text-muted me-1">Support</span>
      <a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
    </div>
    <div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
    <div class="ms-3 text-nowrap">
      <a class="topbar-link me-4 d-none d-md-inline-block" href="#">
        <i class="ci-location"></i>
        Order tracking
      </a>
      <div class="topbar-text dropdown disable-autohide">
        <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
          <img class="me-2" width="20" src="path-to-image" alt="English"/>
          Eng / $
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
          <li class="dropdown-item">
            <select class="form-select form-select-sm">
              <option value="usd">$ USD</option>
              <option value="eur">€ EUR</option>
              <option value="ukp">£ UKP</option>
              <option value="jpy">¥ JPY</option>
            </select>
          </li>
          <li>
            <a class="dropdown-item pb-1" href="#">
              <img class="me-2" width="20" src="path-to-image" alt="Français"/>
              Français
            </a>
          </li>
          <li>
            <a class="dropdown-item pb-1" href="#">
              <img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
              Deutsch
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#">
            <img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
            Italiano
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Dark topbar -->
<div class="topbar topbar-dark bg-dark">
  <div class="container">
     <!-- Topbar content -->
  </div>
</div>

<!-- Topbar + Navbar -->
<header>
  <div class="topbar topbar-dark bg-dark">
    <div class="container">
      <!-- Topbar content -->
    </div>
  </div>

  <div class="navbar navbar-expand-lg navbar-light shadow-sm">
    <div class="container">
      <!-- Navbar content -->
    </div>
  </div>
</header>

<!-- Multilevel light navbar -->
<header class="shadow-sm">
  <div class="topbar topbar-dark bg-dark">
    <div class="container">
      <div class="topbar-text dropdown d-md-none">
        <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="tel:00331697720">
              <i class="ci-support text-muted me-2"></i>
              (00) 33 169 7720
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#">
              <i class="ci-location text-muted me-2"></i>
              Order tracking
            </a>
          </li>
        </ul>
      </div>
      <div class="topbar-text text-nowrap d-none d-md-inline-block">
        <i class="ci-support"></i>
        <span class="text-muted me-1">Support</span>
        <a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
      </div>
      <div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
      <div class="ms-3 text-nowrap">
        <a class="topbar-link me-4 d-none d-md-inline-block" href="#">
          <i class="ci-location"></i>
          Order tracking
        </a>
        <div class="topbar-text dropdown disable-autohide">
          <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
            <img class="me-2" width="20" src="path-to-image" alt="English"/>
            Eng / $
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li class="dropdown-item">
              <select class="form-select form-select-sm">
                <option value="usd">$ USD</option>
                <option value="eur">€ EUR</option>
                <option value="ukp">£ UKP</option>
                <option value="jpy">¥ JPY</option>
              </select>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Français"/>
                Français
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
                Deutsch
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
                Italiano
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand d-none d-lg-block me-3 flex-shrink-0" href="#">
        <img width="142" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <a class="navbar-brand d-lg-none me-2" href="#">
        <img width="74" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <div class="input-group d-none d-lg-flex flex-nowrap mx-4">
        <input class="form-control pe-5" type="text" placeholder="Search for products">
        <i class="ci-search position-absolute top-50 end-0 translate-middle-y text-muted fs-base me-3"></i>
      </div>
      <div class="navbar-toolbar d-flex align-items-center">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-tool d-lg-none" href="#">
          <div class="navbar-tool-icon-box">
            <i class="navbar-tool-icon ci-search"></i>
          </div>
        </a>
        <a class="navbar-tool ms-1 ms-lg-0 me-n1 me-lg-2" href="#">
          <div class="navbar-tool-icon-box">
            <i class="navbar-tool-icon ci-user"></i>
          </div>
          <div class="navbar-tool-text ms-n2"><small>Hello, Sign in</small>My Account</div>
        </a>
        <a class="navbar-tool ms-3" href="#">
          <div class="navbar-tool-icon-box bg-secondary">
            <span class="navbar-tool-label">4</span>
            <i class="navbar-tool-icon ci-cart"></i>
          </div>
          <div class="navbar-tool-text"><small>My Cart</small>$265.00</div>
        </a>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-lg navbar-light bg-light mt-n2 pt-0 pb-2 px-3 px-lg-0">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <hr class="d-lg-none my-3">
        <ul class="navbar-nav navbar-mega-nav pe-lg-2 me-lg-2">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle ps-0" href="#">
              <i class="ci-view-grid me-2"></i>
              Departments
            </a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pages</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Components</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

<!-- Multilevel dark navbar -->
<header>
  <div class="topbar topbar-dark bg-darker">
    <div class="container">
      <div class="topbar-text dropdown d-md-none">
        <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Useful links</a>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="tel:00331697720">
              <i class="ci-support text-muted me-2"></i>
              (00) 33 169 7720
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#">
              <i class="ci-location text-muted me-2"></i>
              Order tracking
            </a>
          </li>
        </ul>
      </div>
      <div class="topbar-text text-nowrap d-none d-md-inline-block">
        <i class="ci-support"></i>
        <span class="text-muted me-1">Support</span>
        <a class="topbar-link" href="tel:00331697720">(00) 33 169 7720</a>
      </div>
      <div class="topbar-text d-none d-md-inline-block">Free shipping for order over $200</div>
      <div class="ms-3 text-nowrap">
        <a class="topbar-link me-4 d-none d-md-inline-block" href="#">
          <i class="ci-location"></i>
          Order tracking
        </a>
        <div class="topbar-text dropdown disable-autohide">
          <a class="topbar-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
            <img class="me-2" width="20" src="path-to-image" alt="English"/>
            Eng / $
          </a>
          <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end border border-light">
            <li class="dropdown-item">
              <select class="form-select form-select-sm">
                <option value="usd">$ USD</option>
                <option value="eur">€ EUR</option>
                <option value="ukp">£ UKP</option>
                <option value="jpy">¥ JPY</option>
              </select>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Français"/>
                Français
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
                Deutsch
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
                Italiano
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <a class="navbar-brand d-none d-lg-block me-3 flex-shrink-0" href="#">
        <img width="142" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <a class="navbar-brand d-lg-none me-2" href="#">
        <img width="74" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <div class="input-group d-none d-lg-flex flex-nowrap mx-4">
        <input class="form-control rounded-end pe-5" type="text" placeholder="Search for products">
        <i class="ci-search position-absolute top-50 end-0 translate-middle-y text-muted fs-base me-3"></i>
      </div>
      <div class="navbar-toolbar d-flex align-items-center">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-tool d-lg-none" href="#">
          <div class="navbar-tool-icon-box">
            <i class="navbar-tool-icon ci-search"></i>
          </div>
        </a>
        <a class="navbar-tool ms-1 ms-lg-0 me-n1 me-lg-2" href="#">
          <div class="navbar-tool-icon-box">
            <i class="navbar-tool-icon ci-user"></i>
          </div>
          <div class="navbar-tool-text ms-n2"><small>Hello, Sign in</small>My Account</div>
        </a>
        <a class="navbar-tool ms-3" href="#">
          <div class="navbar-tool-icon-box bg-secondary">
            <span class="navbar-tool-label">4</span>
            <i class="navbar-tool-icon ci-cart"></i>
          </div>
          <div class="navbar-tool-text"><small>My Cart</small>$265.00</div>
        </a>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-lg navbar-dark bg-dark mt-n2 pt-0 pb-2 px-3 px-lg-0">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <hr class="hr-light d-lg-none my-3">
        <ul class="navbar-nav navbar-mega-nav pe-lg-2 me-lg-2">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle ps-0" href="#">
              <i class="ci-view-grid me-2"></i>
              Departments
            </a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pages</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Components</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

<!-- Offcanvas menu example -->
<!-- Use .navbar-expand-* classes to create a dynamic and flexible navigation sidebar -->
<header class="navbar navbar-light shadow-sm">
  <div class="container">

    <!-- Brand -->
    <a class="navbar-brand d-none d-lg-block order-lg-1" href="#">
      <img width="142" src="path-to-logo" alt="Cartzilla"/>
    </a>
    <a class="navbar-brand d-lg-none me-2" href="#">
      <img width="74" src="path-to-logo" alt="Cartzilla"/>
    </a>

    <!-- Toolbar -->
    <div class="navbar-toolbar d-flex align-items-center order-lg-3">
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>

    <!-- Offcanvas menu -->
    <div class="offcanvas offcanvas-end me-auto order-lg-2" id="navbarOffcanvas">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title">Menu</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" 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" data-bs-auto-close="outside">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="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>