"bootstrap nav covert in canvas off sidebar in mobile"
Bootstrap 3.3.0 Snippet by Gurmeet Singh

<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 ----------> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="menu"><i class="fa fa-bars" id="menu_icon"></i></a> <a class="navbar-brand" href="#">WebSiteName</a> </div><!--navbar-header close--> <div class="collapse navbar-collapse drop_menu" id="content_details"> <ul class="nav navbar-nav"> <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-font"></span> About<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Company</a></li> <li><a href="#">Work</a></li> <li><a href="#">Timing</a></li> </ul><!--dropdown-menu close--> </li> <li><a href="#"><span class="glyphicon glyphicon-heart-empty"></span> Gallery</a></li> <li><a href="#"><span class="glyphicon glyphicon-phone"></span> Contact</a></li> </ul><!--nav navbar-nav close--> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul><!--navbar-right close--> </div><!--collapse navbar-collapse drop_menu close--> </div><!--container-fluid close--> </nav><!--navbar navbar-inverse close--> <br> <br> <br> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <p>This is some text.</p> <p>This is another text.</p> </div><!--container close--> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <p>This is some text.</p> <p>This is another text.</p> </div><!--container close--> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <p>This is some text.</p> <p>This is another text.</p> </div><!--container close--> <div class="container"> <div class="jumbotron"> <h1>Bootstrap Tutorial</h1> <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p> </div> <p>This is some text.</p> <p>This is another text.</p> </div><!--container close-->
.navbar-inverse {background-color: #0e364c;border-color: #0e364c;border-radius: 0px;height:50px;width:100%;position: fixed;} .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #fff;background-color: #0e364c;} .navbar-inverse .navbar-nav>li>a {color: #00BCD4;font-family: 'Open Sans', sans-serif;} .menu { display:none;} @media all and (max-width:768px){ .navbar-inverse .drop_menu {display: block;visibility: visible;width: 110px;height:1000px;padding:0px 20px;position: absolute;right:-100px; transition:all ease 0.5s;border-top: 0px solid;cursor: pointer;} a.menu { display:block !important;margin: 9px 2px;float: right;color: #00bcd4; border:0px solid; background:none; font-size:30px;width:27px;position: relative; cursor:pointer;} .drop_menu1 { display: block;visibility: visible;width:250px;height:1000px;padding:5px 30px;position: absolute;right:0 !important; background-color: #0e364c !important; transition:all ease 0.5s;border-top: 0px solid;cursor: pointer;top: 50px;} }
$(document).ready(function(e) { $('#menu_icon').click(function(){ if($("#content_details").hasClass('drop_menu')) { $("#content_details").addClass('drop_menu1').removeClass('drop_menu'); } else{ $("#content_details").addClass('drop_menu').removeClass('drop_menu1'); } }); });

Related: See More


Questions / Comments: