My desktop menu view is perfect now I want to fix hamburger menu only for mobile version only; how can I add hamburger menu with CSS and JavaScript?
<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.0">
<title>menu 1</title>
</head>
<div class="navbar-mega">
<div class="dropdown-mega">
<button class="dropbtn-mega" style="padding-top: 6px;padding-bottom: 0px;"><a href=""><i class="fa fa-home"
aria-hidden="true"></i></a></button>
</div>
<div class="dropdown-mega">
<button class="dropbtn-mega"> Footwear</button>
<div class="dropdown-content-mega">
<div class="row-mega">
<div class="column-mega">
<h3>Shoes</h3>
<a href="">Casual Shoes</a>
<a href="">Sneaker & Sports Shoes</a>
<a href="">Formal & Party Shoes</a>
<a href="">School Shoes</a>
</div>
<div class="column-mega">
<h3>Sandals</h3>
<a href="">Clogs </a>
<a href="">Sandal</a>
<a href="">Flip Flop</a>
</div>
<div class="column-mega">
<h3>Socks</h3>
<a href="">Newborn Socks</a>
<a href="">Regular Socks </a>
<a href="">School Socks</a>
<a href="">Fashion Socks</a>
<a href="">Stocking & Tights</a>
</div>
<div class="column-mega">
<h3>Sock Shoes</h3>
<a href="">Booties</a>
<a href="">Rubber Soles Sock Shoes</a>
</div>
<div class="column-mega">
<img width="300px" src="">
</div>
</div>
</div>
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
<body>
</body>
</html>
javascriptcssEdit tags.hamburger {
cursor: pointer;
display: none;
}
.hamburger span {
background: #ccc;
width: 2px;
height: 18px;
display: inline-block;
}
@media only screen and (min-width : 320px) and (max-width : 480px) {
.hamburger {
display: block;
}
}<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.0">
<title>menu 1</title>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
</head>
<body>
<div class="navbar-mega">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="dropdown-mega">
<button class="dropbtn-mega" style="padding-top: 6px;padding-bottom: 0px;">
<a href=""><i class="fa fa-home" aria-hidden="true"></i></a>
</button>
</div>
<div class="dropdown-mega">
<button class="dropbtn-mega"> Footwear</button>
<div class="dropdown-content-mega">
<div class="row-mega">
<div class="column-mega">
<h3>Shoes</h3>
<a href="">Casual Shoes</a>
<a href="">Sneaker & Sports Shoes</a>
<a href="">Formal & Party Shoes</a>
<a href="">School Shoes</a>
</div>
<div class="column-mega">
<h3>Sandals</h3>
<a href="">Clogs </a>
<a href="">Sandal</a>
<a href="">Flip Flop</a>
</div>
<div class="column-mega">
<h3>Socks</h3>
<a href="">Newborn Socks</a>
<a href="">Regular Socks </a>
<a href="">School Socks</a>
<a href="">Fashion Socks</a>
<a href="">Stocking & Tights</a>
</div>
<div class="column-mega">
<h3>Sock Shoes</h3>
<a href="">Booties</a>
<a href="">Rubber Soles Sock Shoes</a>
</div>
<div class="column-mega">
<img width="300px" src="">
</div>
</div>
</div>
</div>
</div>
</body>
</html>First, hide the hamburger menu and display it just on mobile devices:
.hamburger {
display: none;
}
@media (max-width: 1000px) {
.hamburger {
display: block;
}
}
Use @media for show/hide with width mobile