Bootstrap Snippet Hamburger menu icon with navbar using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.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;
  }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
function openNav() {
  document.getElementById("myNav").style.height = "20%";
}
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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