Responsive and powerful navigation header which supports branding, navigation, and more.
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-darkmakes the text dark colored and
.navbar-lightmakes 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
- Inside the .navbar-brand, you can specify two logos;
.logo-darkto display for .navbar-dark; and
.logo-lightto be display with .navbar-light.
You should set the placement of navbar using
data-navbarattribute. 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
- In mobile devices, the content inside
.navbar-mobilewill 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
.d-stick-nonewill 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 -->
Navbar navigation links build on our .nav options with their own modifier class
We demonstrate some examples on how to create a navbar layout with different type of content and alignments.