<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 ----------> <div class="container"> <div class="row"> <h3>"X" In responsive navigation</h3> <h5>Resize to Mobile view to check the effect</h5> <nav class="navbar white navbar-default"> <div class="logo"></div> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1" aria-expanded="false" aria-controls="navbar"> <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> </div> <div id="navbar-1" class="navbar-collapse collapse mainnav"> <ul class="nav navbar-nav"> <li><a class="scroller" href="#proj-head">Title</a> </li> <li><a href="#section3">One</a> </li> <li><a href="#section4">Two</a> </li> <li><a href="#section6">Three</a> </li> <li><a href="#section6">Four</a> </li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </nav> </div> </div>

.navbar-toggle .icon-bar { width: 22px; transition: all 0.2s; -webkit-transition: all 0.2s; } .navbar-default .navbar-toggle { position:relative; padding-top:10px; z-index:100 } .navbar-toggle .top-bar { transform: rotate(45deg); -webkit-transform: rotate(45deg); transform-origin: 10% 10%; -webkit-transform-origin: 10% 10%; } .navbar-toggle .middle-bar { opacity: 0; } .navbar-toggle .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 10% 90%; } .navbar-toggle.collapsed .top-bar { transform: rotate(0); -webkit-transform: rotate(0); } .navbar-toggle.collapsed .middle-bar { opacity: 1; } .navbar-toggle.collapsed .bottom-bar { transform: rotate(0); -webkit-transform: rotate(0); }