"Bootstrap Sidebar navigation with login & signup button "
Bootstrap 3.3.0 Snippet by vivekbisht109

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Victory Chauffeur</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/custom.css" rel="stylesheet"> <link href="css/animation.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="https://use.fontawesome.com/45e03a14ce.js"></script> </head> <body> <section class="slider_ reservation_section"> <header> <!--header_top--> <div class="container"> <nav class="navbar navbar-default header_bar"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img src="https://lh6.googleusercontent.com/-y-MY2satK-E/AAAAAAAAAAI/AAAAAAAAAJU/ER_hFddBheQ/photo.jpg" alt="User Avatar" class="img-circle" width="40px"></a> <span class="navbar-toggle" onclick="openNav()"><i class="fa fa-bars" aria-hidden="true"></i></span> </div> <main> <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#" class="menu_btn hidden-xs"> <span onclick="openNav()"><!--<i class="fa fa-bars" aria-hidden="true"></i>--><span class="btn btn-red border-radius">Click Here</span></span></a></li> </ul> </div></main> </nav> </div> </header> </section> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="col-sm-6 side_menu"> <a href="#" class="active">Home</a> <a href="#">About Us </a> <a href="#">Our Fleet </a> <a href="#">Services </a> <a href="#">Tours </a> <a href="#">Specials </a> <a href="#">Contact Us</a> </div><!--side_menu--> <div class="col-sm-6 login_side"> <h3 class="text-red">Are you a member? Sign Up / Login</h3> <button href="#" class="btn btn-red border-radius">signup</button>     <button href="#" class="btn btn-none border-radius">login</button> <h3 class="mar-25">Get In Touch!</h3> <p>Victory Chauffeur Services Cape Town</p> <ul class="list-unstyled contact_info"> <li><i class="fa fa-phone" aria-hidden="true"></i> + 27 71 200 5304, + 27 21 839 5211</li> <li><i class="fa fa-fax" aria-hidden="true"></i> + 27 21 839 5211</li> <li><i class="fa fa-envelope-o" aria-hidden="true"></i> info@chauffeurservicescapetown.co.za</li> </ul> <div class="social_ico"><a href="#"> <i class="fa fa-facebook"></i></a><a href="#"> <i class="fa fa-twitter"></i> </a><a href="#"> <i class="fa fa-google-plus"></i> </a> <a href="#"> <i class="fa fa-youtube-play"></i> </a> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script> // To attach Backstrech as the body's background //$.backstretch("images/banner.jpg"); // You may also attach Backstretch to a block-level element function openNav() { document.getElementById("mySidenav").style.width = "100%"; } /* Close/hide the sidenav */ function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script> </body> </html>
body { color: #818181; font-family: "Open Sans",sans-serif; } .header_bar { border-radius: 0; } .header_bar .navbar-brand { height: 70px; } .header_bar main { margin-top: 0px; } header { padding-top: 30px; } .header_bar .navbar-nav li a.active { color: #ec3a3e; } /**sidbar menu**/ .sidenav { background-color: #111; height: 100%; left: 0; overflow-x: hidden; padding-top: 100px; position: fixed; text-align: left; top: 0; transition: all 0.5s ease 0s; width: 0; z-index: 1; color:#fff; } .sidenav a { color: #fff; display: block; padding: 8px 8px 8px 32px; text-decoration: none; transition: all 0.3s ease 0s; } .sidenav a:hover{ color: #f1f1f1; } .sidenav .side_menu a { font-size: 24px; font-weight: 600; padding-left: 8px; } .sidenav .closebtn { font-size: 30px; margin-left: 50px; position: absolute; right: 25px; top: 0; } .side_menu { border-right: 1px solid #ffffff; padding-left: 32px; } .login_side { padding-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} } /**sidbar menu close**/ .btn-red{ border-color:#ec3a3e; background:#ec3a3e; color:#fff; } .btn-none{ border-color:#fff; background:transparent; color:#fff; } .btn.focus, .btn:focus, .btn:hover { color: #fff; opacity: 0.8; } .border-radius { border-radius:0px; } .login_side .btn { font-size: 16px; padding-left: 30px; padding-right: 30px; text-transform: uppercase; } .text-red{ color:#ec3a3e !important; } h1, h2, h3, h4, h5, h6 { color: #4d4d4d; font-weight: 600; margin-top: 0; } .social_ico a { display: inline-block; height: 30px; line-height: 30px; margin: 0 5px 0 0; text-align: center; width: 30px; background: #c0c4c7 none repeat scroll 0 0; color: #fff; padding:0px; } .social_ico { float: left; margin-top: 15px; width: 100%; } .contact_info { float: left; margin-top: 20px; width: 100%; } .mar-25 { margin-top:25px; } .header_bar .navbar-toggle { height: auto; margin-top: 19px; padding: 7px 12px; cursor:pointer; } .social_ico a:hover { background: #ec3a3e none repeat scroll 0 0; } .sidenav .side_menu a:hover, .sidenav .side_menu a.active { border-left: 4px solid #ec3a3e; color: #ec3a3e; } .top_section { float: left; margin-bottom: 25px; width: 100%; } .chu-section { float: left; padding: 40px 0; width: 100%; } section { float: left; width: 100%; } .bg-gray{ background-color:#262627; color:#fff; } .section-cover { float: left; padding: 40px; width: 100%; } .bg-gray h1, .bg-gray h4 { color: #fff; } .ico-cover { background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0; border-radius: 100px; clear: both; height: 100px; line-height: 100px; margin: auto auto 20px; position: relative; text-align: center; width: 100px; } .view-btn ,.view-btn:hover,.view-btn:focus{ color: #ffffff; font-weight: 600; text-decoration:none; } .ico-cover::after { border: 4px solid #050505; border-radius: 100px; content: ""; height: 90px; left: 5px; line-height: 90px; position: absolute; top: 5px; width: 90px; } .login_side h3 { color: #ffffff; } @media screen and (max-width: 767px) { .side_menu { border-right: none; } }

Related: See More


Questions / Comments: