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 | How to Build | Useful Bits |
Tutorial Video | The End |
DOWNLOAD & DEMO
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short 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.
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.
HAMBURGER MENU DEMO
Go ahead. Resize the window and see the hamburger menu in action.
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
<!-- (A) MENU WRAPPER -->
<nav id="hamnav">
<!-- (B) THE HAMBURGER -->
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<!-- (C) MENU ITEMS -->
<div id="hamitems">
<a href="a.html">First</a>
<a href="b.html">Second</a>
<a href="c.html">Third</a>
<a href="d.html">Forth</a>
</div>
</nav>
The HTML part should be pretty straightforward:
- First, we create the wrapper for the 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☰
is the HTML symbol for the “3 lines hamburger icon”. - Finally, we sandwich the menu items
<a>
inside the<div id="hamitems">
wrapper.
That’s all, zero Javascript involved.
STEP 2) CSS FOR BIG SCREENS
/* [ON BIG SCREEN] */
/* (A) WRAPPER */
#hamnav {
width: 100%;
background: #000;
}
/* (B) HORIZONTAL MENU ITEMS */
#hamitems { display: flex; }
#hamitems a {
flex-grow: 1;
flex-basis: 0;
padding: 10px;
color: white;
text-decoration: none;
text-align: center;
}
#hamitems a:hover { background: #af0d0d; }
/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { display: none; }
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:
- Self-explanatory, a full-width navigation menu.
- Next, we set
#hamitems
todisplay: flex
. Addingflex-grow: 1
andflex-basis: 0
to the menu items will automatically space them out equally. - Since we do not need the hamburger icon on the big screen, we hide it by attaching
display: none
to#hamnav label
and#hamburger
.
This is actually all the important mechanics on the big screen, and we now have a working horizontal navigation bar.
STEP 3) RESPONSIVE CSS FOR SMALL SCREENS
/* [ON SMALL SCREENS] */
@media screen and (max-width: 768px){
/* (A) BREAK INTO VERTICAL MENU */
#hamitems a {
box-sizing: border-box;
display: block;
width: 100%;
border-top: 1px solid #333;
}
/* (B) SHOW HAMBURGER ICON */
#hamnav label {
display: inline-block;
color: white;
background: #a02620;
font-style: normal;
font-size: 1.2em;
padding: 10px;
}
/* (C) TOGGLE SHOW/HIDE MENU */
#hamitems { display: none; }
#hamnav input:checked ~ #hamitems { display: block; }
}
Lastly, we add some style changes on the small screen to do the responsive magic:
- Transform the horizontal menu into a vertical one by adding
#hamitems a { width: 100% }
- Show the hamburger icon with
#hamnav label { display: inline-block }
.- Take extra note – We are showing the hamburger
label
only, thecheckbox
remains hidden. - The checkbox will still work when the user clicks on the
label
.
- Take extra note – We are showing the hamburger
- A little confusing, but this is where the magic happens.
- By default,
#hamitems { display: none; }
will hide the menu items. #hamnav input:checked ~ #hamitems { display: block; }
in simple English – Show the menu items when the hiddencheckbox
is checked.
- By default,
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.
#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 }
.
I WANT DROPDOWN ITEMS!
That won’t be “simple” anymore, but feel free to challenge yourself…
- Dropdown Menu With Pure CSS – Code Boxx
- Multi-Level Dropdown? That’s more like a Tree Menu – Code Boxx
COMPATIBILITY CHECKS
- CSS Flexbox – CanIUse
- CSS Sibling Selector – CanIUse
This hamburger menu works nice across all modern browsers.
TUTORIAL VIDEO
INFOGRAPHIC CHEAT SHEET
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!
This was a lot easier to follow than other tutorials I’ve seen. However, mine isn’t working. The hamburger icon is present, but the menu doesn’t drop down once I click on it. Is there a way that we can fix this? I copy and pasted the code, so it should be working. I changed the background color, but that’s it. Also, is there a way that I can resize the hamburger icon. I tried everything with no luck. Thanks for your time and this tutorial.
1) Resizing the hamburger icon is as easy as adding
label[for="hamburger"] { font-size: XX }
2) The
<input type="checkbox" id="hamburger"/>
MUST be in the same container as the<ul>
menu, since we are targeting them as siblings in CSS –#page-nav input:checked ~ ul { OPEN MENU }
Got it! Thanks so much.
Thanks for this tutorial, this was the simplest one I could find, easy to understand compared to the other ones out there.
Awesome thank you! Helped a lot.. building Satellite.Computer. Peace.
I echo the comment above, been looking at loads of tutorials on this today and this was by far the clearest I have found, really well set out and explained.
I did find the ☰ code doesn’t display in some older browsers, and as the average age of the people using the website I am managing is probably quite old, I decided to create a little hamburger image instead and it works a treat, even on Chrome v18!
Thanks!
That has to be the clearest Hamburger menu tutorial I have ever come across – none of the messing about with borders and box shadows to create the lines. Thank you