Pure CSS Hamburger Menu – In 5 minutes.

Summary: In this video, you’ll learn how to build a CSS hamburger menu.

Step 1 – HTML Boiler Plate

Before we begin make sure you have a basic HTML boiler plate

<!DOCTYPE html>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css">
      <h1>Hello World!</h1>
        <script src="basic.js" async defer>

Step 2 – HTML <input> and <label> tags

Inside your HTML file create an input with type of checkbox and label tags like so:

<input id="menu" type="checkbox">
<label for="menu"></label>

Now What is connecting those 2 ?
Well that’s

  • ID attribute in the input field with the value of menu
  • The for attribute in the label tag

That’s it for the HTML. Now let’s move on to the CSS part.

Step 3 – Adding CSS

Let’s style the body tags first

* CSS File ?
 body {
     background: #636e72;
     height: 100%;

You can check the checkbox it’s still visible. Now let’s hide it.

Step 4 – Hiding the HTML input checkbox

Let’s select the input field with type of checkbox by its ID.
id=”menu” but in CSS file and set visibility to hidden like this:

#menu {
     visibility: hidden;

Now check it and its hidden.

The rest of the code

 label::after {
     position: absolute;
     width: 100px;
     height: 15px;
     border-radius: 5px;
     background: #fff;  
     transition: 0.6s;
     -webkit-transition: 0.6s; 
/* label */
 label  {
     cursor: pointer;
     top: 50%;
     left: 50%;
     margin-left: -50%;
     margin-right: -7.5;
/* style ::before and ::after */
 label::before {
     content: "";
     transform: translateY(-30px);
 label::after {
    content: "";
    transform: translateY(30px);

/* animate when checked */
#menu:checked + label {
    width: 0px;
#menu:checked + label::before {
    transform: rotate(45deg) translate(0px);
#menu:checked + label::after {
    transform: rotate(-45deg) translate(0px);

About the author

Leave a Reply

Your email address will not be published. Required fields are marked *