<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Example #1 .navbar-fixed-top .navbar-default --> <nav class="navbar navbar-fixed-top navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> <a class="navbar-brand" href="#">Example #1</a> </div> <!-- .navbar-collapse --> <div class="collapse navbar-collapse" id="example-1"> <ul class="nav navbar-nav"> <li><a href="#">Link 1</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 1 <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><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <!-- Example #2 .navbar-inverse --> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> <a class="navbar-brand" href="#">Example #2</a> </div> <!-- .navbar-collapse --> <div class="collapse navbar-collapse" id="example-2"> <ul class="nav navbar-nav"> <li><a href="#">Link 1</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 1 <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><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- Example #2 .navbar-inverse --> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-3" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> <a class="navbar-brand" href="#">Example #3</a> </div> <!-- .navbar-collapse --> <div class="collapse navbar-collapse" id="example-3"> <ul class="nav navbar-nav"> <li><a href="#">Link 1</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 1 <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><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- Example #3 .navbar-fixed-bottom .navbar-default --> <nav class="navbar navbar-fixed-bottom navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-3" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> <a class="navbar-brand" href="#">Example #3 Brand</a> </div> <!-- .navbar-collapse --> <div class="collapse navbar-collapse" id="example-3"> <ul class="nav navbar-nav"> <li><a href="#">Link 1</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 1 <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><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="col-md-12 text-center"> <h2>Navbar with toggle button v2.0</h2> <p>hover effect doesnt work on small screen.</p> <p>no java or jquery, only CSS.</p> <p>*Resize the window to 768px or minor to view toggle-button.</p> <p>Example #1 = .navbar-fixed-top .navbar-default</p> <p>Example #2 = .navbar-inverse > .container-fluid</p> <p>Example #3 = .navbar-default > .container</p> <p>Example #4 = .navbar-fixed-bottom .navbar-default</p> </div> </div> </div><!-- /.container -->

/* required for navbar-fixed-top */ body { padding-top: 70px; padding-bottom: 70px; /*for navbar-fixed-bottom*/ overflow: hidden } /* Correct left margin */ .navbar-header{ padding-left: 15px; } .navbar .navbar-toggle { position: relative; z-index: 2; min-height: 34px; padding: 9px 5px; border-color:transparent } .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus, .navbar .navbar-toggle:not(.collapsed) { background-color: transparent; border-color: transparent } .top-bar, .bottom-bar { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out } .navbar .navbar-toggle:not(.collapsed) .top-bar { position: absolute; top: 46%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } .navbar .navbar-toggle:not(.collapsed) .middle-bar { background-color: transparent } .navbar .navbar-toggle:not(.collapsed) .bottom-bar { position: absolute; bottom: 46%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg) }