Cartzilla | Navbar

Basic example

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

    <!-- Brand -->
    <a class="navbar-brand d-none d-lg-block mr-3 order-lg-1" href="#" style="min-width: 7rem;">
      <img width="142" src="path-to-logo" alt="Cartzilla"/>
    </a>
    <a class="navbar-brand d-lg-none mr-2 order-lg-1" href="#" style="min-width: 2.125rem;">
      <img width="34" 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-toggle="collapse" data-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 czi-search"></i></div>
      </a>
      <a class="navbar-tool ml-1 mr-n1" href="#">
        <div class="navbar-tool-icon-box">
          <i class="navbar-tool-icon czi-user"></i>
        </div>
      </a>
      <a class="navbar-tool ml-3" href="#">
        <div class="navbar-tool-icon-box bg-secondary">
          <span class="navbar-tool-label">4</span>
          <i class="navbar-tool-icon czi-cart"></i>
        </div>
      </a>
    </div>

    <!-- Collapsible menu -->
    <div class="collapse navbar-collapse mr-auto order-lg-2" id="navbarCollapse">
      <hr class="d-lg-none mt-3 mb-2">
      <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-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-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>

// Basic navbar
header.navbar.navbar-expand-lg.navbar-light.box-shadow-sm
  .container

    // Brand
    a(href="#", style="min-width: 7rem;").navbar-brand.d-none.d-lg-block.mr-3.order-lg-1
      +image("path-to-logo", "Cartzilla")(width="142")
    a(href="#", style="min-width: 2.125rem;").navbar-brand.d-lg-none.mr-2.order-lg-1
      +image("path-to-logo", "Cartzilla")(width="34")
    
    // Toolbar
    .navbar-toolbar.d-flex.align-items-center.order-lg-3
      button(type="button", data-toggle="collapse", data-target="#navbarCollapse").navbar-toggler
        span.navbar-toggler-icon
      a(href="#").navbar-tool
        .navbar-tool-icon-box: i.navbar-tool-icon.czi-search
      a(href="#").navbar-tool.ml-1.mr-n1
        .navbar-tool-icon-box: i.navbar-tool-icon.czi-user
      a(href="#").navbar-tool.ml-3
        .navbar-tool-icon-box.bg-secondary
          span.navbar-tool-label 4
          i.navbar-tool-icon.czi-cart

    // Collapsible menu
    #navbarCollapse.collapse.navbar-collapse.mr-auto.order-lg-2
      hr.d-lg-none.mt-3.mb-2
      ul.navbar-nav
        li.nav-item.active
          a.nav-link(href="#") Home
        li.nav-item
          a.nav-link(href="#") Link
        li.nav-item.dropdown
          a.nav-link.dropdown-toggle(href="#", data-toggle="dropdown") Dropdown
          ul.dropdown-menu
            li
              a.dropdown-item(href="#") Action link
            li.dropdown
              a(href="#", data-toggle="dropdown").dropdown-item.dropdown-toggle
                | Dropdown
              ul.dropdown-menu
                li
                  a.dropdown-item(href="#") Action link
                li
                  a.dropdown-item(href="#") Another action
                li
                  a.dropdown-item(href="#") Something else here
                li
                  a.dropdown-item(href="#") Yet another link
            li
              a.dropdown-item(href="#") Another action
            li.dropdown-divider 
            li
              a.dropdown-item(href="#") Something else here
        li.nav-item
          a.nav-link.disabled(href="#", tabindex="-1", aria-disabled="true") Disabled

Color schemes

<!-- 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>

// Dark navbar
header.navbar.navbar-expand-lg.navbar-dark.bg-dark
  .container
    //- Navbar content

// Accent navbar
header.navbar.navbar-expand-lg.navbar-accent.bg-dark
  .container
    //- Navbar content
    
// Custom color navbar
header.navbar.navbar-expand-lg.bg-light(style="background-color: #f2f5fc;")
  .container
    //- Navbar content

Topbar

<!-- Light topbar -->
<div class="topbar topbar-light bg-secondary">
  <div class="topbar-text dropdown d-md-none">
    <a class="topbar-link dropdown-toggle" href="#" data-toggle="dropdown">Useful links</a>
    <ul class="dropdown-menu">
      <li>
        <a class="dropdown-item" href="tel:00331697720">
          <i class="czi-support text-muted mr-2"></i>
          (00) 33 169 7720
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="#">
          <i class="czi-location text-muted mr-2"></i>
          Order tracking
        </a>
      </li>
    </ul>
  </div>
  <div class="topbar-text text-nowrap d-none d-md-inline-block">
    <i class="czi-support"></i>
    <span class="text-muted mr-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="ml-3 text-nowrap">
    <a class="topbar-link mr-4 d-none d-md-inline-block" href="#">
      <i class="czi-location"></i>
      Order tracking
    </a>
    <div class="topbar-text dropdown disable-autohide">
      <a class="topbar-link dropdown-toggle" href="#" data-toggle="dropdown">
        <img class="mr-2" width="20" src="path-to-image" alt="English"/>
        Eng / $
      </a>
      <ul class="dropdown-menu dropdown-menu-right">
        <li class="dropdown-item">
          <select class="custom-select custom-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="mr-2" width="20" src="path-to-image" alt="Français"/>
            Français
          </a>
        </li>
        <li>
          <a class="dropdown-item pb-1" href="#">
            <img class="mr-2" width="20" src="path-to-image" alt="Deutsch"/>
            Deutsch
          </a>
        </li>
        <li>
          <a class="dropdown-item" href="#">
          <img class="mr-2" width="20" src="path-to-image" alt="Italiano"/>
          Italiano
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

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

// Light topbar
.topbar.topbar-light.bg-secondary
  .container
    .topbar-text.dropdown.d-md-none
      a(href="#", data-toggle="dropdown").topbar-link.dropdown-toggle Useful links
      ul.dropdown-menu
        li
          a(href="tel:00331697720").dropdown-item
            i.czi-support.text-muted.mr-2
            | (00) 33 169 7720
        li
          a(href="#").dropdown-item
            i.czi-location.text-muted.mr-2
            | Order tracking
    .topbar-text.text-nowrap.d-none.d-md-inline-block
      i.czi-support
      span.text-muted.mr-1 Support
      a.topbar-link(href="tel:00331697720") (00) 33 169 7720
    .topbar-text.d-none.d-md-inline-block Free shipping for order over $200
    .ml-3.text-nowrap
      a(href="#").topbar-link.mr-4.d-none.d-md-inline-block
        i.czi-location
        | Order tracking
      .topbar-text.dropdown.disable-autohide
        a(href="#", data-toggle="dropdown").topbar-link.dropdown-toggle
          +image("path-to-image", "English")(width="20").mr-2
          | Eng / $
        ul.dropdown-menu.dropdown-menu-right
          li.dropdown-item
            select.custom-select.custom-select-sm
              option(value="usd") $ USD
              option(value="eur") € EUR
              option(value="ukp") £ UKP
              option(value="jpy") ¥ JPY
          li
            a(href="#").dropdown-item.pb-1
              +image("path-to-image", "Français")(width="20").mr-2
              | Français
          li
            a(href="#").dropdown-item.pb-1
              +image("path-to-image", "Deutsch")(width="20").mr-2
              | Deutsch
          li
            a(href="#").dropdown-item
              +image("path-to-image", "Italiano")(width="20").mr-2
              | Italiano

// Dark topbar
.topbar.topbar-dark.bg-dark
  .container
    //- Topbar content

Topbar + Navbar

<!-- 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 box-shadow-sm">
    <div class="container">
      <!-- Navbar content -->
    </div>
  </div>
</header>

// Topbar + Navbar
header.box-shadow-sm
  .topbar.topbar-dark.bg-dark
    .container
      //- Topbar content

  .navbar.navbar-expand-lg.navbar-light
    .container
      //- Navbar content

Multilevel light navbar

<!-- Multilevel light navbar -->
<header class="box-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-toggle="dropdown">Useful links</a>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="tel:00331697720">
              <i class="czi-support text-muted mr-2"></i>
              (00) 33 169 7720
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#">
              <i class="czi-location text-muted mr-2"></i>
              Order tracking
            </a>
          </li>
        </ul>
      </div>
      <div class="topbar-text text-nowrap d-none d-md-inline-block">
        <i class="czi-support"></i>
        <span class="text-muted mr-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="ml-3 text-nowrap">
        <a class="topbar-link mr-4 d-none d-md-inline-block" href="#">
          <i class="czi-location"></i>
          Order tracking
        </a>
        <div class="topbar-text dropdown disable-autohide">
          <a class="topbar-link dropdown-toggle" href="#" data-toggle="dropdown">
            <img class="mr-2" width="20" src="path-to-image" alt="English"/>
            Eng / $
          </a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li class="dropdown-item">
              <select class="custom-select custom-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="mr-2" width="20" src="path-to-image" alt="Français"/>
                Français
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="mr-2" width="20" src="path-to-image" alt="Deutsch"/>
                Deutsch
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="mr-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 mr-3 flex-shrink-0" href="#" style="min-width: 7rem;">
        <img width="142" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <a class="navbar-brand d-lg-none mr-2" href="#" style="min-width: 2.125rem;">
        <img width="34" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <div class="input-group-overlay d-none d-lg-flex mx-4">
        <input class="form-control appended-form-control" type="text" placeholder="Search for products">
        <div class="input-group-append-overlay">
          <span class="input-group-text">
            <i class="czi-search"></i>
          </span>
        </div>
      </div>
      <div class="navbar-toolbar d-flex align-items-center">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 czi-search"></i>
          </div>
        </a>
        <a class="navbar-tool ml-1 ml-lg-0 mr-n1 mr-lg-2" href="#">
          <div class="navbar-tool-icon-box">
            <i class="navbar-tool-icon czi-user"></i>
          </div>
          <div class="navbar-tool-text ml-n2"><small>Hello, Sign in</small>My Account</div>
        </a>
        <a class="navbar-tool ml-3" href="#">
          <div class="navbar-tool-icon-box bg-secondary">
            <span class="navbar-tool-label">4</span>
            <i class="navbar-tool-icon czi-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">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <hr class="d-lg-none mt-3 mb-2">
        <ul class="navbar-nav mega-nav pr-lg-2 mr-lg-2">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle pl-0" href="#">
              <i class="czi-view-grid mr-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 light navbar
header.box-shadow-sm
  .topbar.topbar-dark.bg-dark
    .container
      .topbar-text.dropdown.d-md-none
        a(href="#", data-toggle="dropdown").topbar-link.dropdown-toggle
          | Useful links
        ul.dropdown-menu
          li
            a(href="tel:00331697720").dropdown-item
              i.czi-support.text-muted.mr-2
              | (00) 33 169 7720
          li
            a(href="#").dropdown-item
              i.czi-location.text-muted.mr-2
              | Order tracking
      .topbar-text.text-nowrap.d-none.d-md-inline-block
        i.czi-support
        span.text-muted.mr-1 Support
        a(href="tel:00331697720").topbar-link
          | (00) 33 169 7720
      .topbar-text.d-none.d-md-inline-block Free shipping for order over $200
      .ml-3.text-nowrap
        a(href="#").topbar-link.mr-4.d-none.d-md-inline-block
          i.czi-location
          | Order tracking
        .topbar-text.dropdown.disable-autohide
          a(href="#", data-toggle="dropdown").topbar-link.dropdown-toggle
            +image("path-to-image", "English")(width="20").mr-2
            | Eng / $
          ul.dropdown-menu.dropdown-menu-right
            li.dropdown-item
              select.custom-select.custom-select-sm
                option(value="usd") $ USD
                option(value="eur") € EUR
                option(value="ukp") £ UKP
                option(value="jpy") ¥ JPY
            li
              a(href="#").dropdown-item.pb-1
                +image("path-to-image", "Français")(width="20").mr-2
                | Français
            li
              a(href="#").dropdown-item.pb-1
                +image("path-to-image", "Deutsch")(width="20").mr-2
                | Deutsch
            li
              a(href="#").dropdown-item
                +image("path-to-image", "Italiano")(width="20").mr-2
                | Italiano

  .navbar.navbar-expand-lg.navbar-light.bg-light
    .container
      a(href="#", style="min-width: 7rem;").navbar-brand.d-none.d-lg-block.mr-3.flex-shrink-0
        +image("path-to-logo", "Cartzilla")(width="142")
      a(href="#", style="min-width: 2.125rem;").navbar-brand.d-lg-none.mr-2
        +image("path-to-logo", "Cartzilla")(width="34")
      .input-group-overlay.d-none.d-lg-flex.mx-4
        input(type="text", placeholder="Search for products").form-control.appended-form-control
        .input-group-append-overlay
          span.input-group-text
            i.czi-search
      .navbar-toolbar.d-flex.align-items-center
        button(type="button", data-toggle="collapse", data-target="#navbarCollapse").navbar-toggler
          span.navbar-toggler-icon
        a(href="#").navbar-tool.d-lg-none
          .navbar-tool-icon-box: i.navbar-tool-icon.czi-search
        a(href="#").navbar-tool.ml-1.ml-lg-0.mr-n1.mr-lg-2
          .navbar-tool-icon-box: i.navbar-tool-icon.czi-user
          .navbar-tool-text.ml-n2
            small Hello, Sign in
            | My Account
        a(href="#").navbar-tool.ml-3
          .navbar-tool-icon-box.bg-secondary
            span.navbar-tool-label 4
            i.navbar-tool-icon.czi-cart
          .navbar-tool-text
            small My Cart
            | $265.00

  .navbar.navbar-expand-lg.navbar-light.bg-light.mt-n2.pt-0.pb-2
    .container
      #navbarCollapse.collapse.navbar-collapse
        hr.d-lg-none.mt-3.mb-2
        ul.navbar-nav.mega-nav.pr-lg-2.mr-lg-2
          li.nav-item.dropdown
            a(href="#").nav-link.dropdown-toggle.pl-0
              i.czi-view-grid.mr-2
              | Departments
        ul.navbar-nav
          li.nav-item
            a.nav-link(href="#") Home
          li.nav-item
            a.nav-link(href="#") Shop
          li.nav-item
            a.nav-link(href="#") Pages
          li.nav-item
            a.nav-link(href="#") Blog
          li.nav-item
            a.nav-link(href="#") Components

Multilevel dark navbar

<!-- 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-toggle="dropdown">Useful links</a>
        <ul class="dropdown-menu">
          <li>
            <a class="dropdown-item" href="tel:00331697720">
              <i class="czi-support text-muted mr-2"></i>
              (00) 33 169 7720
            </a>
          </li>
          <li>
            <a class="dropdown-item" href="#">
              <i class="czi-location text-muted mr-2"></i>
              Order tracking
            </a>
          </li>
        </ul>
      </div>
      <div class="topbar-text text-nowrap d-none d-md-inline-block">
        <i class="czi-support"></i>
        <span class="text-muted mr-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="ml-3 text-nowrap">
        <a class="topbar-link mr-4 d-none d-md-inline-block" href="#">
          <i class="czi-location"></i>
          Order tracking
        </a>
        <div class="topbar-text dropdown disable-autohide">
          <a class="topbar-link dropdown-toggle" href="#" data-toggle="dropdown">
            <img class="mr-2" width="20" src="path-to-image" alt="English"/>
            Eng / $
          </a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li class="dropdown-item">
              <select class="custom-select custom-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="mr-2" width="20" src="path-to-image" alt="Français"/>
                Français
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="mr-2" width="20" src="path-to-image" alt="Deutsch"/>
                Deutsch
              </a>
            </li>
            <li>
              <a class="dropdown-item pb-1" href="#">
                <img class="mr-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 mr-3 flex-shrink-0" href="#" style="min-width: 7rem;">
        <img width="142" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <a class="navbar-brand d-lg-none mr-2" href="#" style="min-width: 2.125rem;">
        <img width="34" src="path-to-logo" alt="Cartzilla"/>
      </a>
      <div class="input-group-overlay d-none d-lg-flex mx-4">
        <input class="form-control appended-form-control" type="text" placeholder="Search for products">
        <div class="input-group-append-overlay">
          <span class="input-group-text">
            <i class="czi-search"></i>
          </span>
        </div>
      </div>
      <div class="navbar-toolbar d-flex align-items-center">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 czi-search"></i>
          </div>
        </a>
        <a class="navbar-tool ml-1 ml-lg-0 mr-n1 mr-lg-2" href="#">
          <div class="navbar-tool-icon-box">
            <i class="navbar-tool-icon czi-user"></i>
          </div>
          <div class="navbar-tool-text ml-n2"><small>Hello, Sign in</small>My Account</div>
        </a>
        <a class="navbar-tool ml-3" href="#">
          <div class="navbar-tool-icon-box bg-secondary">
            <span class="navbar-tool-label">4</span>
            <i class="navbar-tool-icon czi-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">
    <div class="container">
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <hr class="hr-light d-lg-none mt-3 mb-2">
        <ul class="navbar-nav mega-nav pr-lg-2 mr-lg-2">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle pl-0" href="#">
              <i class="czi-view-grid mr-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
  .topbar.topbar-dark.bg-darker
    .container
      .topbar-text.dropdown.d-md-none
        a(href="#", data-toggle="dropdown").topbar-link.dropdown-toggle
          | Useful links
        ul.dropdown-menu
          li
            a(href="tel:00331697720").dropdown-item
              i.czi-support.text-muted.mr-2
              | (00) 33 169 7720
          li
            a(href="#").dropdown-item
              i.czi-location.text-muted.mr-2
              | Order tracking
      .topbar-text.text-nowrap.d-none.d-md-inline-block
        i.czi-support
        span.text-muted.mr-1 Support
        a(href="tel:00331697720").topbar-link
          | (00) 33 169 7720
      .topbar-text.d-none.d-md-inline-block Free shipping for order over $200
      .ml-3.text-nowrap
        a(href="#").topbar-link.mr-4.d-none.d-md-inline-block
          i.czi-location
          | Order tracking
        .topbar-text.dropdown.disable-autohide
          a(href="#", data-toggle="dropdown").topbar-link.dropdown-toggle
            +image("path-to-image", "English")(width="20").mr-2
            | Eng / $
          ul.dropdown-menu.dropdown-menu-right
            li.dropdown-item
              select.custom-select.custom-select-sm
                option(value="usd") $ USD
                option(value="eur") € EUR
                option(value="ukp") £ UKP
                option(value="jpy") ¥ JPY
            li
              a(href="#").dropdown-item.pb-1
                +image("path-to-image", "Français")(width="20").mr-2
                | Français
            li
              a(href="#").dropdown-item.pb-1
                +image("path-to-image", "Deutsch")(width="20").mr-2
                | Deutsch
            li
              a(href="#").dropdown-item
                +image("path-to-image", "Italiano")(width="20").mr-2
                | Italiano

  .navbar.navbar-expand-lg.navbar-dark.bg-dark
    .container
      a(href="#", style="min-width: 7rem;").navbar-brand.d-none.d-lg-block.mr-3.flex-shrink-0
        +image("path-to-logo", "Cartzilla")(width="142")
      a(href="#", style="min-width: 2.125rem;").navbar-brand.d-lg-none.mr-2
        +image("path-to-logo", "Cartzilla")(width="34")
      .input-group-overlay.d-none.d-lg-flex.mx-4
        input(type="text", placeholder="Search for products").form-control.appended-form-control
        .input-group-append-overlay
          span.input-group-text
            i.czi-search
      .navbar-toolbar.d-flex.align-items-center
        button(type="button", data-toggle="collapse", data-target="#navbarCollapse").navbar-toggler
          span.navbar-toggler-icon
        a(href="#").navbar-tool.d-lg-none
          .navbar-tool-icon-box: i.navbar-tool-icon.czi-search
        a(href="#").navbar-tool.ml-1.ml-lg-0.mr-n1.mr-lg-2
          .navbar-tool-icon-box: i.navbar-tool-icon.czi-user
          .navbar-tool-text.ml-n2
            small Hello, Sign in
            | My Account
        a(href="#").navbar-tool.ml-3
          .navbar-tool-icon-box.bg-secondary
            span.navbar-tool-label 4
            i.navbar-tool-icon.czi-cart
          .navbar-tool-text
            small My Cart
            | $265.00

  .navbar.navbar-expand-lg.navbar-dark.bg-dark.mt-n2.pt-0.pb-2
    .container
      #navbarCollapse.collapse.navbar-collapse
        hr.hr-light.d-lg-none.mt-3.mb-2
        ul.navbar-nav.mega-nav.pr-lg-2.mr-lg-2
          li.nav-item.dropdown
            a(href="#").nav-link.dropdown-toggle.pl-0
              i.czi-view-grid.mr-2
              | Departments
        ul.navbar-nav
          li.nav-item
            a.nav-link(href="#") Home
          li.nav-item
            a.nav-link(href="#") Shop
          li.nav-item
            a.nav-link(href="#") Pages
          li.nav-item
            a.nav-link(href="#") Blog
          li.nav-item
            a.nav-link(href="#") Components