3 Steps Simple Responsive Hamburger Menu In Pure CSS

That’s all, zero Javascript involved.

STEP 2) CSS FOR BIG SCREENS

ham-menu.css

/* [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:

1. Self-explanatory, a full-width navigation menu.
2. Next, we set #hamitems to display: flex. Adding flex-grow: 1 and flex-basis: 0 to the menu items will automatically space them out equally.
3. 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

ham-menu.css

/* [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:

1. Transform the horizontal menu into a vertical one by adding #hamitems a { width: 100% }
2. Show the hamburger icon with #hamnav label { display: inline-block }.
   • Take extra note – We are showing the hamburger label only, the checkbox remains hidden.
   • The checkbox will still work when the user clicks on the label.
3. 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 hidden checkbox is checked.

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 }.

I WANT DROPDOWN ITEMS!

That won’t be “simple” anymore, but feel free to challenge yourself…

COMPATIBILITY CHECKS

This hamburger menu works nice across all modern browsers.

TUTORIAL VIDEO