Navbar

<!-- Basic navbar: Button (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-box-shadow">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 mr-0 pr-lg-2 mr-lg-4" href="#">
      <img class="d-none d-lg-block" width="153" src="path-to-dsktop-logo" alt="Around"/>
      <img class="d-lg-none" width="58" src="path-to-mobile-logo" alt="Around"/>
    </a>
    <div class="d-flex align-items-center order-lg-3">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse1">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="btn btn-primary d-none d-sm-inline-block ml-3" href="#">Sign up</a>
    </div>
    <div class="collapse navbar-collapse order-lg-2" id="navbarCollapse1">
      <ul class="navbar-nav mr-auto">
        <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: Toolbar (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-box-shadow">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 mr-0 pr-lg-2 mr-lg-4" href="#">
      <img class="d-none d-lg-block" width="153" src="path-to-desktop-logo" alt="Around"/>
      <img class="d-lg-none" width="58" src="path-to-mobile-logo" alt="Around"/>
    </a>
    <div class="d-flex align-items-center order-lg-3">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse2">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-tool">
        <a class="navbar-tool-icon-box mr-2" href="#">
          <i class="fe-search"></i>
        </a>
      </div>
      <div class="navbar-tool d-none d-sm-flex">
        <a class="navbar-tool-icon-box mr-2" href="#">
          <i class="fe-user"></i>
        </a>
      </div>
      <div class="border-left mr-2" style="height: 30px;"></div>
      <div class="navbar-tool mr-2">
        <a class="navbar-tool-icon-box" href="#">
          <i class="fe-shopping-cart"></i>
          <span class="navbar-tool-badge">3</span>
        </a>
      </div>
    </div>
    <div class="collapse navbar-collapse order-lg-2" id="navbarCollapse2">
      <!-- Site menu goes here. See example above -->
    </div>
  </div>
</header>

<!-- Basic navbar: Logged in user (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-box-shadow">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 mr-0 pr-lg-2 mr-lg-4" href="#">
      <img class="d-none d-lg-block" width="153" src="path-to-desktop-logo" alt="Around"/>
      <img class="d-lg-none" width="58" src="path-to-mobile-logo" alt="Around"/>
    </a>
    <div class="d-flex align-items-center order-lg-3">
      <button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbarCollapse3">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-tool dropdown">
        <a class="navbar-tool-icon-box" href="#">
          <img class="navbar-tool-icon-box-img" src="path-to-image" alt="Avatar"/>
        </a>
        <a class="navbar-tool-label dropdown-toggle" href="#"><small>Hello,</small>Amanda</a>
        <ul class="dropdown-menu dropdown-menu-right" style="width: 15rem;">
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="fe-shopping-bag font-size-base opacity-60 mr-2"></i>
              Orders
              <span class="nav-indicator"></span>
              <span class="ml-auto font-size-xs text-muted">2</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="fe-dollar-sign font-size-base opacity-60 mr-2"></i>
              Sales
              <span class="ml-auto font-size-xs text-muted">$735.00</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="fe-message-square font-size-base opacity-60 mr-2"></i>
              Messages
              <span class="nav-indicator"></span>
              <span class="ml-auto font-size-xs text-muted">1</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="fe-users font-size-base opacity-60 mr-2"></i>
              Followers
              <span class="ml-auto font-size-xs text-muted">146</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="fe-star font-size-base opacity-60 mr-2"></i>
              Reviews
              <span class="ml-auto font-size-xs text-muted">15</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="fe-heart font-size-base opacity-60 mr-2"></i>
              Favorites
              <span class="ml-auto font-size-xs text-muted">6</span>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item d-flex align-items-center" href="#">
              <i class="fe-log-out font-size-base opacity-60 mr-2"></i>
              Sign out
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="collapse navbar-collapse order-lg-2" id="navbarCollapse3">
      <!-- Site menu goes here. See example above -->
    </div>
  </div>
</header>

// Basic navbar: Button (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-light.bg-light.navbar-box-shadow
  .container.px-0.px-xl-3
    a(href="#").navbar-brand.order-lg-1.mr-0.pr-lg-2.mr-lg-4
      +image("path-to-desktop-logo", "Around")(width="153").d-none.d-lg-block
      +image("path-to-mobile-logo", "Around")(width="58").d-lg-none
    .d-flex.align-items-center.order-lg-3
      button(type="button", data-toggle="collapse", data-target="#navbarCollapse1").navbar-toggler
        span.navbar-toggler-icon
      a(href="#").btn.btn-primary.d-none.d-sm-inline-block.ml-3
        | Sign up
    #navbarCollapse1.collapse.navbar-collapse.order-lg-2
      ul.navbar-nav.mr-auto
        li.nav-item.active
          a(href="#").nav-link
            | Home
        li.nav-item
          a(href="#").nav-link
            | Link
        li.nav-item.dropdown
          a(href="#" data-toggle="dropdown").nav-link.dropdown-toggle
            | Dropdown
          ul.dropdown-menu
            li
              a(href="#").dropdown-item
                | Action link
            li.dropdown
              a(href="#", data-toggle="dropdown").dropdown-item.dropdown-toggle
                | Dropdown
              ul.dropdown-menu
                li
                  a(href="#").dropdown-item
                    | Action link
                li
                  a(href="#").dropdown-item
                    | Another action
                li
                  a(href="#").dropdown-item
                    | Something else here
                li
                  a(href="#").dropdown-item
                    | Yet another link
            li
              a(href="#").dropdown-item
                | Another action
            li.dropdown-divider 
            li
              a(href="#").dropdown-item
                | Something else here
        li.nav-item
          a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled
            | Disabled

// Basic navbar: Toolbar (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-light.bg-light.navbar-box-shadow
  .container.px-0.px-xl-3
    a(href="#").navbar-brand.order-lg-1.mr-0.pr-lg-2.mr-lg-4
      +image("path-to-desktop-logo", "Around")(width="153").d-none.d-lg-block
      +image("path-to-mobile-logo", "Around")(width="58").d-lg-none
    .d-flex.align-items-center.order-lg-3
      button(type="button", data-toggle="collapse", data-target="#navbarCollapse2").navbar-toggler
        span.navbar-toggler-icon
      .navbar-tool
        a(href="#").navbar-tool-icon-box.mr-2
          i.fe-search
      .navbar-tool.d-none.d-sm-flex
        a(href="#").navbar-tool-icon-box.mr-2
          i.fe-user
      div(style="height: 30px;").border-left.mr-2
      .navbar-tool.mr-2
        a(href="#").navbar-tool-icon-box
          i.fe-shopping-cart
          span.navbar-tool-badge 3
    #navbarCollapse2.collapse.navbar-collapse.order-lg-2
      // Site menu goes here. See example above

// Basic navbar: Logged in user (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-light.bg-light.navbar-box-shadow
  .container.px-0.px-xl-3
    a(href="#").navbar-brand.order-lg-1.mr-0.pr-lg-2.mr-lg-4
      +image("path-to-desktop-logo", "Around")(width="153").d-none.d-lg-block
      +image("path-to-mobile-logo", "Around")(width="58").d-lg-none
    .d-flex.align-items-center.order-lg-3
      button(type="button", data-toggle="collapse", data-target="#navbarCollapse3").navbar-toggler.mr-2
        span.navbar-toggler-icon
      .navbar-tool.dropdown
        a(href="#").navbar-tool-icon-box
          +image("path-to-image", "Avatar").navbar-tool-icon-box-img
        a(href="#").navbar-tool-label.dropdown-toggle
          small Hello,
          | Amanda
        ul.dropdown-menu.dropdown-menu-right(style="width: 15rem;")
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.fe-shopping-bag.font-size-base.opacity-60.mr-2
              | Orders
              span.nav-indicator
              span.ml-auto.font-size-xs.text-muted 2
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.fe-dollar-sign.font-size-base.opacity-60.mr-2
              | Sales
              span.ml-auto.font-size-xs.text-muted $735.00
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.fe-message-square.font-size-base.opacity-60.mr-2
              | Messages
              span.nav-indicator
              span.ml-auto.font-size-xs.text-muted 1
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.fe-users.font-size-base.opacity-60.mr-2
              | Followers
              span.ml-auto.font-size-xs.text-muted 146
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.fe-star.font-size-base.opacity-60.mr-2
              | Reviews
              span.ml-auto.font-size-xs.text-muted 15
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.fe-heart.font-size-base.opacity-60.mr-2
              | Favorites
              span.ml-auto.font-size-xs.text-muted 6
          li.dropdown-divider
          li
            a(href="#").dropdown-item.d-flex.align-items-center
              i.fe-log-out.font-size-base.opacity-60.mr-2
              | Sign out
    #navbarCollapse3.collapse.navbar-collapse.order-lg-2
      // Site menu goes here. See example above

<!-- 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-dark bg-secondary">
  <div class="container px-0 px-xl-3">
    ...
  </div>
</header>

// Dark navbar (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-dark.bg-dark
  .container.px-0.px-xl-3
    // ...

// Primary navbar (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-dark.bg-primary
  .container.px-0.px-xl-3
    // ...

// Gray navbar (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-dark.bg-secondary
  .container.px-0.px-xl-3
    // ...

<!-- Navbar featuring off-canvas menu on mobile devices (change to .container-fluid for full width navbar) -->
<header class="navbar navbar-expand-lg navbar-light bg-light navbar-box-shadow fixed-top">
  <div class="container px-0 px-xl-3">
    <a class="navbar-brand order-lg-1 mr-0 pr-lg-2 mr-lg-4" href="#">
      <img class="d-none d-lg-block" width="153" src="path-to-desktop-logo" alt="Around"/>
      <img class="d-lg-none" width="58" src="path-to-mobile-logo" alt="Around"/>
    </a>
    <div class="d-flex align-items-center order-lg-3 ml-auto">
      <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-offcanvas-id="offcanvasMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="navbar-tool mr-2">
        <a class="navbar-tool-icon-box" href="#"><i class="fe-search"></i></a>
      </div>
      <div class="navbar-tool d-none d-sm-flex mr-2">
        <a class="navbar-tool-icon-box" href="#">
          <i class="fe-user"></i>
        </a>
      </div>
      <div class="border-left mr-2" style="height: 30px;"></div>
      <div class="navbar-tool mr-2">
        <a class="navbar-tool-icon-box" href="#">
          <i class="fe-shopping-cart"></i>
          <span class="navbar-tool-badge">3</span>
        </a>
      </div>
    </div>
    <div class="cs-offcanvas-collapse order-lg-2" id="offcanvasMenu">
      <div class="cs-offcanvas-cap navbar-box-shadow">
        <h5 class="mt-1 mb-0">Menu</h5>
        <button class="close lead" type="button" data-toggle="offcanvas" data-offcanvas-id="offcanvasMenu"><span aria-hidden="true">×</span></button>
      </div>
      <div class="cs-offcanvas-body" data-simplebar>
        <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>
  </div>
</header>

// Navbar featuring off-canvas menu on mobile devices (change to .container-fluid for full width navbar)
header.navbar.navbar-expand-lg.navbar-light.bg-light.navbar-box-shadow.fixed-top
  .container.px-0.px-xl-3
    a(href="#").navbar-brand.order-lg-1.mr-0.pr-lg-2.mr-lg-4
      +image("path-to-desktop-logo", "Around")(width="153").d-none.d-lg-block
      +image("path-to-mobile-logo", "Around")(width="58").d-lg-none
    .d-flex.align-items-center.order-lg-3.ml-auto
      button(type="button", data-toggle="offcanvas", data-offcanvas-id="offcanvasMenu").navbar-toggler
        span.navbar-toggler-icon
      .navbar-tool.mr-2
        a(href="#").navbar-tool-icon-box
          i.fe-search
      .navbar-tool.d-none.d-sm-flex.mr-2
        a(href="#").navbar-tool-icon-box
          i.fe-user
      div(style="height: 30px;").border-left.mr-2
      .navbar-tool.mr-2
        a(href="#").navbar-tool-icon-box
          i.fe-shopping-cart
          span.navbar-tool-badge 3
    #offcanvasMenu.cs-offcanvas-collapse.order-lg-2
      .cs-offcanvas-cap.navbar-box-shadow
        h5.mt-1.mb-0 Menu
        button(type="button", data-toggle="offcanvas", data-offcanvas-id="offcanvasMenu").close.lead
          span(aria-hidden="true") ×
      .cs-offcanvas-body(data-simplebar)
        ul.navbar-nav
          li.nav-item.active
            a(href="#").nav-link
              | Home
          li.nav-item
            a(href="#").nav-link
              | Link
          li.nav-item.dropdown
            a(href="#", data-toggle="dropdown").nav-link.dropdown-toggle
              | Dropdown
            ul.dropdown-menu
              li
                a(href="#").dropdown-item
                  | Action link
              li.dropdown
                a(href="#", data-toggle="dropdown").dropdown-item.dropdown-toggle
                  | Dropdown
                ul.dropdown-menu
                  li
                    a(href="#").dropdown-item
                      | Action link
                  li
                    a(href="#").dropdown-item
                      | Another action
                  li
                    a(href="#").dropdown-item
                      | Something else here
                  li
                    a(href="#").dropdown-item
                      | Yet another link
              li
                a(href="#").dropdown-item
                  | Another action
              li.dropdown-divider 
              li
                a(href="#").dropdown-item
                  | Something else here
          li.nav-item
            a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled
              | Disabled

<!-- Light topbar -->
<div class="topbar topbar-light bg-secondary">
  <div class="container d-md-flex align-items-center px-0 px-xl-3">
    <div class="d-none d-md-block text-nowrap mr-3">
      <i class="fe-phone font-size-base text-muted mr-1"></i>
      <span class="text-muted mr-2">Support</span>
      <a class="topbar-link mr-1" href="tel:9107848015">910-784-8015</a>
    </div>
    <div class="d-flex text-right ml-auto">
      <a class="d-none d-sm-inline-block topbar-link pr-2 mr-4" href="#">
        <i class="fe-map-pin font-size-base opacity-60 mr-1"></i>Track your order
      </a>
      <div class="dropdown ml-0 ml-sm-auto ml-md-0 mr-3">
        <a class="topbar-link dropdown-toggle" href="#" data-toggle="dropdown">
          <img class="mr-2" width="20" src="path-to-image" alt="English"/>Eng
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">
            <img class="mr-2" width="20" src="path-to-image" alt="Français"/>
            Français
          </a>
          <a class="dropdown-item" href="#">
            <img class="mr-2" width="20" src="path-to-image" alt="Deutsch"/>
            Deutsch
          </a>
          <a class="dropdown-item" href="#">
            <img class="mt-n1 mr-2" width="20" src="path-to-image" alt="Italiano"/>
            Italiano
          </a>
        </div>
      </div>
      <div class="dropdown ml-auto ml-sm-0">
        <a class="topbar-link dropdown-toggle" href="#" data-toggle="dropdown">$ Dollar (US)</a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">€ Euro (EU)</a>
          <a class="dropdown-item" href="#">£ Pound (UK)</a>
          <a class="dropdown-item" href="#">¥ Yen (JP)</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Dark topbar -->
<div class="topbar topbar-dark bg-dark">
  <div class="container d-md-flex align-items-center px-0 px-xl-3">
    ...
  </div>
</div>

// Light topbar
.topbar.topbar-light.bg-secondary
  .container.d-md-flex.align-items-center.px-0.px-xl-3
    .d-none.d-md-block.text-nowrap.mr-3
      i.fe-phone.font-size-base.text-muted.mr-1
      span.text-muted.mr-2 Support
      a(href="tel:9107848015").topbar-link.mr-1
        | 910-784-8015
    .d-flex.text-right.ml-auto
      a(href="#").d-none.d-sm-inline-block.topbar-link.pr-2.mr-4
        i.fe-map-pin.font-size-base.opacity-60.mr-1
        | Track your order
      .dropdown.ml-0.ml-sm-auto.ml-md-0.mr-3
        a(href="#", data-toggle="dropdown").topbar-link.dropdown-toggle
          +image("path-to-image", "English")(width="20").mr-2
          | Eng
        .dropdown-menu.dropdown-menu-right
          a(href="#").dropdown-item
            +image("path-to-image", "Français")(width="20").mr-2
            | Français
          a(href="#").dropdown-item
            +image("path-to-image", "Deutsch")(width="20").mr-2
            | Deutsch
          a(href="#").dropdown-item
            +image("path-to-image", "Italiano")(width="20").mt-n1.mr-2
            | Italiano
      .dropdown.ml-auto.ml-sm-0
        a(href="#", data-toggle="dropdown").topbar-link.dropdown-toggle
          | $ Dollar (US)
        .dropdown-menu.dropdown-menu-right
          a(href="#").dropdown-item
            | € Euro (EU)
          a(href="#").dropdown-item
            | £ Pound (UK)
          a(href="#").dropdown-item
            | ¥ Yen (JP)

// Dark topbar
.topbar.topbar-dark.bg-dark
  .container.d-md-flex.align-items-center.px-0.px-xl-3
    | ...

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

  <!-- Topbar -->
  <div class="topbar topbar-dark bg-dark">
    <div class="container d-md-flex align-items-center px-0 px-xl-3">
      ...
    </div>
  </div>

  <!-- Navbar -->
  <div class="navbar navbar-expand-lg navbar-light bg-light navbar-box-shadow">
    <div class="container d-md-flex align-items-center px-0 px-xl-3">
      ...
    </div>
  </div>
</header>

// 2-level header: Topbar + Navbar
header

  // Topbar
  .topbar.topbar-dark.bg-dark
    .container.d-md-flex.align-items-center.px-0.px-xl-3
      | ...

  // Navbar
  .navbar.navbar-expand-lg.navbar-light.bg-light.navbar-box-shadow
    .container.d-md-flex.align-items-center.px-0.px-xl-3
      | ...