2 Steps Simple Responsive Pure CSS Hamburger Menu

Welcome to a tutorial on how to create a simple responsive pure CSS Hamburger Menu. Yep, there are plenty of other hamburger menus on the Internet, but some of them still require the use of Javascript. So here it is, a menu that is purely CSS driven, not a single line of Javascript. Read on to find out how to build one!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

Download & Demo What Hamburger? How to Build
Useful Bits The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

HAMBURGER MENU DEMO

Go ahead. Resize the window and see the hamburger menu in action.

 

WHAT IS A HAMBURGER MENU?

For you folks who have stumbled upon this guide, and have totally no idea on why or what people are calling a hamburger menu – You may have noticed the 3 bars symbol () on many websites and mobile applications. Yep, that is the hamburger with a patty sandwiched in between 2 buns.

 

HAMBURGER MENU, NOT JUST THE SYMBOL.

Before some of you guys start to think that a “hamburger menu” is nothing but putting that 3 bars somewhere. Well, there is a little more to it. Typically, the hamburger will not show up on big screens. It is only on the smaller screens that the navigation menu will be collapsed, and the hamburger icon is used to show/hide the menu – That is what we will be building in this tutorial.

 

 

HOW TO BUILD A HAMBURGER MENU

Building a hamburger menu is actually not that difficult these days with the help of modern CSS…

 

STEP 1) THE HTML

index.html
<nav id="hamnav">
  <!-- [THE HAMBURGER] -->
  <label for="hamburger">&#9776;</label>
  <input type="checkbox" id="hamburger"/>
 
  <!-- [MENU ITEMS] -->
  <div id="hamitems">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="tech.html">Tech</a>
    <a href="games.html">Games</a>
    <a href="reviews.html">Reviews</a>
  </div>
</nav>

The HTML part should be pretty straightforward:

  • First, we need to create the wrapper for the entire navigation menu <nav id="hamnav">.
  • Followed by using a <label for="hamburger"> and <input type="checkbox" id="hamburger"/> as the hamburger button.
  • For people who are new, that &#9776; is the HTML symbol for the “3 lines hamburger icon”.
  • Finally, we just sandwich the actual menu items <a> inside the  <div id="hamitems"> wrapper.
  • No Javascript is required here, as we will be using pure CSS to toggle show/hide the menu items.

 

 

STEP 2) THE CSS

ham-menu.css
/* [ON BIG SCREEN] */
/* Wrapper */
#hamnav {
  width: 100%;
  background: #000;
  /* Optional */
  position: sticky;
  top: 0;
}

/* Hide Hamburger */
#hamnav label, #hamburger { display: none; }

/* Horizontal Menu Items */
#hamitems { display: flex; }
#hamitems a {
  width: 20%; /* 100% / 5 tabs = 20% */
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
}
#hamitems a:hover {
  background: #401408;
}

/* [ON SMALL SCREENS] */
@media screen and (max-width: 768px){
  /* Show Hamburger Icon */
  #hamnav label { 
    display: inline-block; 
    color: white;
    background: #a02620;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }

  /* Break down menu items into vertical */
  #hamitems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }

  /* Toggle Show/Hide Menu */
  #hamitems { display: none; }
  #hamnav input:checked ~ #hamitems { display: block; }
}

/* [DOES NOT MATTER] */
html, body {
  padding: 0;
  margin: 0;
  font-family: arial, sans-serif;
}

HOW IT WORKS – ON BIG SCREENS

The CSS is where all the magic happens. This may seem to be a little complicated, but let’s take it step-by-step. Starting with how to display a “normal menu bar” on the big screens:

  • First, we will hide the hamburger menu icon by attaching display: none to #hamnav label and #hamburger – Since we do not need it on the big screen.
  • Next, we set #hamitems to display: flex.
  • Lastly, set the width of the menu items #hamitems a, and add some cosmetics.

This is actually all the important mechanics on the big screen, and we now have a working horizontal navigation bar.

 

HOW IT WORKS – ON SMALL SCREENS

The above “normal” CSS will display a horizontal menu on big screens. But on the smaller screens, we will need to break the menu down into a vertical one due to screen size constraints, and use the hamburger button to toggle show/hide the menu:

  • As usual, we will use the @media media query to apply a different style for small screens.
  • First, we set a display: inline-block to #hamnav label to show the hamburger icon.
  • Take note that the <input type="checkbox"/> remains hidden.
  • Then, we will break the menu items #hamitems a down to show in a vertical orientation by setting it to display: block and width: 100% instead.
  • Finally, we will hide the menu items #hamitems by default.
  • The magic happens with #hamnav input:checked ~ #hamitems and display: block. This will basically toggle show/hide the menu items as the user checks the hidden checkbox/hamburger button.

 

 

USEFUL BITS & LINKS

That’s it for the code, and here is a small extra that you may find useful.

 

STICKY MENU BAR

Want the menu bar to be permanently fixed on top of the screen as the user scrolls down on your website? Simply add a position: sticky to the navigation bar, and that should do the magic.

theme.css
#hamnav {
  position: sticky;
  top: 0;
}

But this will probably cause more problems on a small screen, so use it wisely.

 

BIGGER HAMBURGER?

The hamburger icon is an HTML symbol. Yes, changing the size is as easy as setting label[for="hamburger"] { font-size: XX em }.

 

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEAT SHEET

Pure CSS Hamburger Menu (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this tutorial. I hope that it has helped you to create a better menu system for your project, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!

32 thoughts on “2 Steps Simple Responsive Pure CSS Hamburger Menu”

  1. can you make the hamburger change to a X on click ? i saw this can be done with before after .. but can`t really understand it.

    1. Faster to just add 3 lines of Javascript.

      <label for="hamburger" id="hamlabel">&#9776;</label>
      <input type="checkbox" id="hamburger"/>
      <script>
      document.getElementById("hamburger").onclick = function(){
        document.getElementById("hamlabel").innerHTML = this.checked ? "X" : "&#9776;" ;
      };
      </script>
      

Leave a Comment

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