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


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