Create a Responsive Hamburger Menu with HTML and CSS: A Step-by-Step Tutorial

The hamburger menu, also known as the navigation drawer or side menu, has become a staple in modern web design, particularly for mobile devices. It provides a compact and user-friendly way to display menu items when screen space is limited. In this tutorial, we’ll learn how to create a responsive hamburger menu using only HTML and CSS, without relying on JavaScript.

Prerequisites:

Before we begin, ensure you have a basic understanding of HTML and CSS, a code editor (e.g., Visual Studio Code, Sublime Text, Atom), and a web browser.

Step 1: Set up the HTML Structure

The foundation of our hamburger menu is the HTML structure. We’ll use a <nav> element to contain the menu, an <input> element as a checkbox to toggle the menu visibility, a <label> element for the hamburger icon, and a <div> element to hold the menu items.

<nav>
  <input type="checkbox" id="check">
  <label for="check" class="checkbtn">
    <i class="fas fa-bars"></i>
  </label>
  <div class="nav-mobile">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>
</nav>

Step 2: Style the Navigation Bar with CSS

Next, let’s style the navigation bar using CSS. We’ll set a background color, padding, and font styles.

nav {
 padding: 1.5rem 2rem;
 background-color: #222831;
 color: #fff;
}

We’ll also style the hamburger icon using Font Awesome or a similar icon font library.

.checkbtn {
 font-size: 1.5rem;
 color: white;
 cursor: pointer;
}

Step 3: Hide the Menu by Default

Initially, we want to hide the menu by setting display: none; on the .nav-mobile class.

.nav-mobile {
 display: none;
}

Step 4: Toggle the Menu with a Checkbox Trick

We’ll use a clever trick with a checkbox input to toggle the visibility of the menu. When the checkbox is checked, we’ll show the menu using the #check:checked ~ .nav-mobile selector.

#check:checked ~ .nav-mobile {
 display: block;
}

Step 5: Style the Menu Items

Now, let’s style the menu items inside the `.nav-mobile` class, including colors, padding, and font styles.

.nav-mobile {
 position: absolute;
 top: 4.5rem;
 left: 0;
 background: #222831;
 z-index: 1;
 width: 200px;
}
.nav-mobile a {
 color: #fff;
 padding: 1rem 1.5rem;
 display: block;
}

Step 6: Add Animations (Optional)

To enhance the user experience, we can add animations to the menu using CSS transitions or animations. In this example, we’ll use the w3-animate-right class from the W3.CSS library to animate the menu sliding in from the left.

<div class="nav-mobile w3-animate-right">
 <!-- Menu items -->
</div>

Step 7: Make it Responsive

To ensure our hamburger menu looks great on all devices, we’ll use media queries to adjust the styles for smaller screens.

@media only screen and (max-width: 992px) {
 .checkbtn {
 display: block;
 font-size: 5rem;
 position: absolute;
 top: 30px;
 left: 40px;
 }
.nav-mobile {
 top: 160px;
 width: 100%;
 }
.nav-mobile a {
 font-size: 2rem;
 padding: 2rem 3rem;
 }
}

On smaller screens, we’ll increase the size of the hamburger icon, position it at the top left, and make the menu take up the full width of the screen. We’ll also increase the font size and padding of the menu items for better visibility.

And that’s it! You now have a fully responsive hamburger menu created with pure HTML and CSS. You can customize the styles, colors, and animations to match your website’s design.

The result

Hamburger Menu Demonstration made purely with HTML and CSS

You can find the complete code on my GitHub Repository: Hamburger.

Feel free to customize the code and styles to match your website’s design. You can also experiment with different animations or add additional features to enhance the user experience.

Thanks for reading! My name is Mukund and I’m a Full-Stack Web Developer. You can follow me on Twitter for updates.