ADVERTISEMENT

Responsive Navbar With Hamburger Menu Using HTML and CSS

Telegram Group Join Now

ADVERTISEMENT

Responsive Navbar With Hamburger Menu Using HTML and CSS

Navbar With Hamburger Menu Using HTML and CSS
Navbar With Hamburger Menu Using HTML and CSS

 

ADVERTISEMENT

ADVERTISEMENT

 

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.

ADVERTISEMENT

It was named in this manner because of its resemblance to the Hamburger.

ADVERTISEMENT

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.

ADVERTISEMENT

5+ HTML CSS Projects With Source Code

Html Code Output

Navbar With Hamburger Menu Using HTML and CSS

 

ADVERTISEMENT

2. Writing CSS Code For Hamburger Menu:

Let’s start by defining the CSS properties of the NavBar And The Title.

ADVERTISEMENT

@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

 

Navbar With Hamburger Menu Using HTML and CSS
Navbar With Hamburger Menu Using HTML and CSS

 

Navbar With Hamburger Menu Using HTML and CSS
Navbar With Hamburger Menu Using HTML and CSS

 

50+ HTML, CSS & JavaScript Projects With Source Code

ADVERTISEMENT

Summary:

ADVERTISEMENT

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.

ADVERTISEMENT

Let me know in the comments below which way you prefer for the Hamburger menu.

ADVERTISEMENT

Written by:  Codewithrandom

ADVERTISEMENT

project code: @sanketbodke (codepen)

ADVERTISEMENT

Telegram Group Join Now

Share on:

1 thought on “Responsive Navbar With Hamburger Menu Using HTML and CSS”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT