<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!-- Navigation --> <div class="navbar navbar-default navbar-inverse" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle"> <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="#"> <div class="logo"> <img src="images/logo_white.png" class="logo" alt="logo"/> </div> </a> </div> <div class="navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#" class="active">Home</a></li> <li><a href="#">Work</a></li> <li><a href="#">Course</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <!-- End Navigation-->

.indexcity { z-index: 9999; } .right { right: 0 !important; left: 0 !important; } @media only screen and (max-width: 767px) { .navbar-collapse{ background-color:#ffc107; position: fixed; top: 0; transition:all 0.8s ease-out; height: 100%; width: 100%; left: 700px; } .navbar-inverse .navbar-nav>li>a { color: #000; } }

jQuery(function($){ $('.navbar-toggle').click(function(){ $('.navbar-collapse').toggleClass('right'); $('.navbar-toggle').toggleClass('indexcity'); }); });