Responsive Navbar With Hamburger Menu Using HTML and CSS
The hamburger menu has become an std icon for Navigation, it has become so popular that even most mainstream platforms and apps use them nowadays.
It was named in this manner because of its resemblance to the Hamburger.
Why use Hamburger Menu?
The hamburger menu gives the Website a neater and cleaner way to navigate or by organizing content. Also, Designers have been using the Hamburger menu for so long that it has become a standard itself.
How to Create Hamburger-menu:
There are multiple ways to create Hamburger Menu.
Today we’ll be creating a Hamburger Menu with the help of HTML, CSS & JavaScript.
Without further a do, Let’s get right into it.
1. Writing HTML Code For Navbar
<body>
<nav>
<div class="navbar">
<div class="container nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<div class="logo">
<h1>Navbar</h1>
</div>
<div class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">blogs</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</div>
</div>
</div>
</nav>
</body>There is all the Html Code for the Navbar With Hamburger Menu. Now, you can see output without CSS, then we write CSS for our Responsive Navbar With Hamburger Menu Icon.
5+ HTML CSS Projects With Source Code
Html Code Output
2. Writing CSS Code For Hamburger Menu:
Let’s start by defining the CSS properties of the NavBar And The Title.
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.container {
max-width: 1050px;
width: 90%;
margin: auto;
}
.navbar {
width: 100%;
box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 62px;
}
.navbar .menu-items {
display: flex;
}
.navbar .nav-container li {
list-style: none;
}
.navbar .nav-container a {
text-decoration: none;
color: #0e2431;
font-weight: 500;
font-size: 1.2rem;
padding: 0.7rem;
}
.navbar .nav-container a:hover{
font-weight: bolder;
}
.nav-container {
display: block;
position: relative;
height: 60px;
}
.nav-container .checkbox {
position: absolute;
display: block;
height: 32px;
width: 32px;
top: 20px;
left: 20px;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.nav-container .hamburger-lines {
display: block;
height: 26px;
width: 32px;
position: absolute;
top: 17px;
left: 20px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-container .hamburger-lines .line {
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: #0e2431;
}
.nav-container .hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.4s ease-in-out;
}
.nav-container .hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}
.nav-container .hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.4s ease-in-out;
}
.navbar .menu-items {
padding-top: 120px;
box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
height: 100vh;
width: 100%;
transform: translate(-150%);
display: flex;
flex-direction: column;
margin-left: -40px;
padding-left: 50px;
transition: transform 0.5s ease-in-out;
text-align: center;
}
.navbar .menu-items li {
margin-bottom: 1.2rem;
font-size: 1.5rem;
font-weight: 500;
}
.logo {
position: absolute;
top: 5px;
right: 15px;
font-size: 1.2rem;
color: #0e2431;
}
.nav-container input[type="checkbox"]:checked ~ .menu-items {
transform: translateX(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
transform: rotate(45deg);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
transform: scaleY(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
transform: rotate(-45deg);
}
.nav-container input[type="checkbox"]:checked ~ .logo{
display: none;
}
Final Output Responsive Navbar With Hamburger Menu
50+ HTML, CSS & JavaScript Projects With Source Code
Summary:
We have successfully created our Hamburger menu along with a navbar. Although there are multiple ways to apply the hamburger menu instead of using that span tags. If you have any queries please ask in the comments.
Let me know in the comments below which way you prefer for the Hamburger menu.
Written by: Codewithrandom
project code: @sanketbodke (codepen)
why my menu didnt hidden?