Navbar

Sub-menu

The support for sub-menu was disabled in latest version of bootstrap. The option can be re-enabled by including a small CSS. Below is an example of the structure

EXAMPLE
Project name
  • Home
  • About
  • Services
    • Service A
    • Service B
    • Service C
      • Service C1
      • Service C2
      • Service C3
      • Service C4
      • Service C5

    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Service A</a></li>
                <li><a href="#">Service B</a></li>
                <li class="dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="nav-label">Service C</span><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service C1</a></li>
                        <li><a href="#">Service C2</a></li>
                        <li><a href="#">Service C3</a></li>
                        <li><a href="#">Service C4</a></li>
                        <li><a href="#">Service C5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
                                

Slide

Collapse option of bootstrap is elegant, however further navigation options are need to accommodate more navigation options.

Customisable Options

The data-canvas attribute on body to slide entire HTML content
Standard Navigation Structure
EXAMPLE
Click on navbar-toggle

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
                                        
Slide Navigation Structure
EXAMPLE
Click on navbar-toggle

    <nav class="navbar navbar-default navbar-fixed-top navbar-slide-nav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle pull-right" data-toggle="offcanvas" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-slide offcanvas">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
                                            

Static Right

Static right option is to always keep certian objects like search icon, user icon or shopping cart icon. The class .navbar-right-static keeps .navbar-nav li item inline.

Aways keep .navbar-right-static element on the top of .navbar-header
EXAMPLE

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-right-static">
                <ul class="nav navbar-nav">
                    <li><a href="#" data-toggle="collapse" data-target="#search" class="fs-xs-1-4"><i class="fa fa-user" aria-hidden="true"></i></a></li>
                    <li class="active"><a href="#" data-toggle="collapse" data-target="#search" class="fs-xs-1-4"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
                    <li><a href="#" data-toggle="collapse" data-target="#search" class="fs-xs-1-4"><i class="fa fa-search" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        <div class="navbar-header">
          ...
        </div>
        
      </div>
    </nav>
                                        

Helpers

To adapt with fixed top and bottom navbar on theme change padding and margin classes have been implemented to adapt with theme change. This class also helps to adapt to navmenu.

Classes

  • .pt-navbar-height
  • .pb-navbar-height
  • .mt-navbar-height
  • .mb-navbar-height