• Basic code
  • Colors
  • Sizes
  • 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>