## Basics

Here's some notes to know how our navbar works, before getting deeper into it.

- Most of the basics can be find in the official documentation of navbar component. It's highly recommended to get start from there.
- Our color scheme classes works inverse of the Bootstrap definition. For example, `.navbar-dark` makes the text dark colored and `.navbar-light` makes the colors lighter.
- You can have a different color scheme for the navbar once it's stick at the top by adding one of the `.navbar-stick-dark` or `.navbar-stick-light` classes.
- Inside the .navbar-brand, you can specify two logos; `.logo-dark` to display for .navbar-dark; and `.logo-light` to be display with .navbar-light.
- You should set the placement of navbar using `data-navbar` attribute. It can has one of the following values:
  - `static`: Only at top, don't move with scroll.
  - `fixed`: Always at top of the screen and moves with scrolling down.
  - `sticky`: First at top, hides after a small scroll down, so it won't obscure the header. Once the user scrolls down and passes the header, navbar become fixed/sticky at the top again.
  - `smart`: It's like sticky navbar, but it only becomes sticky when the visitor scrolls up.
- Our template adds few classes to the body tag to detect when the scrollbar passed an element which is to use by CSS. Those classes are `.body-scrolled`, `.navbar-scrolled` and `.header-scrolled`
- In mobile devices, the content inside `.navbar-mobile` will display to the user.
- We have defined few utility classes to make your coding easier for different situations. Those classes can categorized into `.d-mobile-*` —change display value on mobile devices— and `.d-stick-*` —when the navbar sticks to the top— which * can be one of the `none` | `block` | `inline-block` | `flex` | `inline-flex` values. So `.d-stick-none` will hide an element when the navbar has sticked at the top.

The above notes should level-up your understanding from the navbar component. The following example is a basic example of a navbar:

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark" data-navbar="static">
      <div class="container">

        <div class="navbar-left">
          <button class="navbar-toggler" type="button">☰</button>
          <a class="navbar-brand" href="#">
            <img class="logo-dark" src="../assets/img/logo-dark.png" alt="logo">
            <img class="logo-light" src="../assets/img/logo-light.png" alt="logo">
          </a>
        </div>

        <section class="navbar-mobile">
          <nav class="nav nav-navbar ml-auto">
            <a class="nav-link active" href="#">Home</a>
            <a class="nav-link" href="#">Features</a>
            <a class="nav-link" href="#">Pricing</a>
            <a class="nav-link" href="#">Contact</a>
          </nav>
        </section>

      </div>
    </nav><!-- /.navbar -->

## Navigation

Navbar navigation links build on our .nav options with their own modifier class

###### Submenu

###### Multi-column submenu

###### Mega menu

## Alignment

We demonstrate some examples on how to create a navbar layout with different type of content and alignments.

###### Layout 1

###### Layout 2

###### Layout 3

###### Layout 4

###### Layout 5

###### Layout 6

###### Layout 7

###### Layout 8

###### Layout 9