3 Simple Responsive HTML CSS Navigation Menu

NAVIGATION

TABLE OF CONTENTS

Preamble Download & Note	Section A Icon Menu	Section B Hamburger Menu
Section C Hidden Menu	Extra Useful Bits & Links	Closing What’s Next?

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

There is nothing to install, so just download and unzip into a folder. 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.

THE HTML

<nav id="iconNav">
  <a href="#"><i>&#8452;</i> One</a>
  <a href="#"><i>&#8459;</i> Two</a>
  <a href="#"><i>&#8455;</i> Three</a>
  <a href="#"><i>&#8456;</i> Four</a>
  <a href="#"><i>&#8465;</i> Five</a>
</nav>

This should be very straightforward and easy to understand. Just a regular navigation menu with anchor links inside. For those of you who are not sure what those <i>&#8465;</i> tags are, these are simply HTML symbols, and you can check out Toptal for a complete list of the available symbols.

THE CSS

/* [BIG SCREENS] */
#iconNav {
  display: flex;
  background: #000;
}
#iconNav a {
  width: 20%;
  text-align: center;
  padding: 20px;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
}
#iconNav a:hover {
  background: #9b2222;
}

 /* [SMALL SCREENS] */
@media only screen and (max-width: 768px) {
  #iconNav a i {
    display: block;
    font-size: 34px;
  }
  #iconNav a {
    font-size: 14px;
  }
}

The CSS should be pretty straightforward as well.

• We are simply using #iconNav { display: flex; } and #iconNav a { width: 20%; } to  lay the menu items out horizontally.
• On the smaller screens, we break the menu the icons and text down – #iconNav a i { display: block; }

DEMO

Go ahead. Resize the window to see how this navigation menu acts.

THE HTML

<nav id="hamNav">
  <!-- HAMBURGER ICON -->
  <label for="hamIcon">&#9776;</label>
  <input type="checkbox" id="hamIcon"/>

  <!-- MENU ITEMS -->
  <div id="hamItems">
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#">Three</a>
    <a href="#">Four</a>
    <a href="#">Five</a>
  </div>
</nav>

The HTML should be pretty self-explanatory as well, and there are only 2 components to it – The hamburger icon at the top, and the anchor links at the bottom.

THE CSS

/* [BIG SCREENS] */
#hamNav {
  width: 100%;
  background: #000;
}
#hamNav label, #hamIcon { display: none; }
#hamItems { display: flex; }
#hamItems a {
  width: 20%; 
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
}
#hamItems a:hover {
  background: #401408;
}
 
/* [SMALL SCREENS] */
@media screen and (max-width: 768px) {
  #hamNav label {
    display: inline-block; 
    color: white;
    background: #a02620;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }
  #hamItems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }
  #hamItems { display: none; }
  #hamNav input:checked ~ #hamItems { display: block; }
}

On the big screens:

• We hide the hamburger icon as we don’t need to use it – #hamNav label, #hamIcon { display: none; }
• The menu items is laid out using the same CSS flex – #hamItems { display: flex; } and #hamItems a { width: 20% }

On the small screens:

• Show the hamburger icon – #hamNav label { display: inline-block; }
• Collapse the menu items into a single column – #hamItems a { display: block; width: 100%; }
• By default, we hide the navigation bar – #hamItems { display: none; }
• Finally, the magic to toggling the navigation bar lies in the checkbox –#hamNav input:checked ~ #hamItems { display: block; }

DEMO

THE HTML

<nav id="hideNav">
  <!-- MENU ICON -->
  <label for="hideIcon">&#8862;</label>
  <input type="checkbox" id="hideIcon"/>
 
  <!-- MENU ITEMS -->
  <div id="hideItems">
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#">Three</a>
    <a href="#">Four</a>
    <a href="#">Five</a>
  </div>
</nav>

Yep, the HTML for this version is the same as above.

THE CSS

 /* [BIG SCREENS] */
#hideNav {
  width: 100%;
  background: #000;
}
#hideNav label, #hideIcon { display: none; }
#hideItems { display: flex; }
#hideItems a {
  width: 20%; 
  padding: 10px;
  color: white;
  text-decoration: none;
  text-align: center;
}
#hideItems a:hover {
  background: #401408;
}
 
/* [SMALL SCREENS] */
@media screen and (max-width: 768px) {
  #hideNav label { 
    display: inline-block; 
    color: white;
    background: #a02620;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }
  #hideItems {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    flex-wrap: wrap;
    background: #000;
  }
  #hideItems a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-top: 1px solid #333;
  }
  #hideNav input:checked ~ #hideItems { display: block; }
} 

The CSS for this variation is pretty much the same as the hamburger menu.

• On big screens, the mechanics are same.
• On the small screen, we are also using the same checkbox trick to toggle show/hide.
• The only difference here is pretty much setting the menu items to #hideItems { position: fixed; bottom: 0; }, so that it stays at the bottom of the screen.

DEMO

LINKS & REFERENCES

• CSS Hamburger Menu – Code Boxx
• Using media queries – CSS: Cascading Style Sheets | MDN

INFOGRAPHIC