Navbar

Navbars are responsive meta components that serve as navigation headers for your site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

  1. Basic code
  2. Colors
  3. Sizes
  4. Options

Basic code

You can see an example of a navbar in top of this page. Following code is the code for this navbar.


<header class="site-header">

  <!-- Top navbar & branding -->
  <nav class="navbar navbar-default">
    <div class="container">

      <!-- Toggle buttons and brand -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
          <span class="glyphicon glyphicon-option-vertical"></span>
        </button>

        <button type="button" class="navbar-toggle for-sidebar" data-toggle="offcanvas">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" alt="logo"></a>
      </div>
      <!-- END Toggle buttons and brand -->

      <!-- Top navbar -->
      <div id="navbar" class="navbar-collapse collapse" aria-expanded="true" role="banner">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="index.html">Documentation</a></li>
          <li><a href="#">Tutorial</a></li>
          <li><a href="#">FAQ</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Language <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">English</a></li>
              <li><a href="#">French</a></li>
              <li><a href="#">Spanish</a></li>
              <li><a href="#">Chinese</a></li>
            </ul>
          </li>
          <li class="hero"><a href="#">Purchase</a></li>
        </ul>
      </div>
      <!-- END Top navbar -->

    </div>
  </nav>
  <!-- END Top navbar & branding -->
  
</header>

Colors

By default, background color of the navbar is equal to accent color. But you can simply have your light and dark navbar by adding .navbar-light or .navbar-dark to the .navbar.

default

Default

It's default color, doesn't require any class.

default

Light

Uses .navbar-light class.

default

Dark

Uses .navbar-dark class.

Example


<header class="site-header">

  <!-- Top navbar & branding -->
  <nav class="navbar navbar-default navbar-dark">
    ...
  </nav>
  <!-- END Top navbar & branding -->
  
</header>

Sizes

Easily change the height size of your navbar by adding .navbar-sm or .navbar-lg to the .site-header. Even you can make it fullwidth by adding .navbar-fullwidth to the .site-header.

default

Small

Uses .navbar-sm class.

default

Large

Uses .navbar-lg class.

default

Default

It's default size, doesn't require any class.

default

Fullwidth

Uses .navbar-fullwidth class.

Example


<header class="site-header navbar-sm">

  <!-- Top navbar & branding -->
  <nav class="navbar navbar-default">
    ...
  </nav>
  <!-- END Top navbar & branding -->
  
</header>

Options

Still you have more options to customize your navbar for yourself.

Sticky navbar

By adding .sticky class to the .site-header you can fix your navbar on top of the page.


<header class="site-header sticky">

  <!-- Top navbar & branding -->
  <nav class="navbar navbar-default">
    ...
  </nav>
  <!-- END Top navbar & branding -->
  
</header>

Transparent navbar

By adding .navbar-transparent class to the .site-header you can remove background color of the navbar. It's a good practice to have transparent navbar when you included a banner to your page; like the following image.


index



<header class="site-header navbar-transparent">

  <!-- Top navbar & branding -->
  <nav class="navbar navbar-default">
    ...
  </nav>
  <!-- END Top navbar & branding -->
  
</header>