"Hamburger menu icon with navbar"
Bootstrap 3.3.0 Snippet by imsachin

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>HTML</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#">Brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="nav navbar-nav navbar-right"> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> </div> </nav> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="custom.js"></script> </body> </html>
.header .navbar-default .navbar-toggle,.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {background-color: #f5b277;border:none;} .header .navbar-default .navbar-toggle {border-color: #f5b277;border:none;} .header .navbar-nav .open .dropdown-menu{background-color: #f4b074;} .header .navbar-brand{color: #000;font-size: 20px;font-weight: 600;} .header .navbar-nav li a, .header .navbar-nav li a:hover, .header .navbar-nav li a:focus{color:#000;font-size: 20px;} .header .navbar-default .navbar-toggle .icon-bar {background-color: #101010;} .overlay {height: 0%;width: 100%;position: fixed;z-index: 1;top: 0;left: 0;background-color: #00BCD4;overflow-y: hidden;transition: 0.5s;} .overlay-content {position: relative;top: 5%;width: 100%;text-align: center;margin-top: 0px;} .overlay ul li a {padding: 0px 30px 0px 30px;text-decoration: none;font-size: 36px;color: #000;transition: 0.3s;} .overlay ul li a:hover, .overlay ul li a:focus {color: #f1f1f1;} .overlay ul li{list-style:none;display:inline-block;margin-top:15px;} .overlay .closebtn,.overlay .closebtn:hover {position: absolute;top: 18px;right:35px;font-size: 35px;text-decoration:none;color:#000;} @media screen and (max-height: 450px) { .overlay {overflow-y: auto;} .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } }
function openNav() { document.getElementById("myNav").style.height = "20%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; }

Related: See More

Vue Material Kit
Hamburger Icon Animations
Bootstrap 4 Navbar with Icon Top
Navbar with Social icon & Dropdown

Questions / Comments: