3 Simple Responsive HTML CSS Navigation Menu

INTRODUCTION

VARIATIONS OF NAVIGATION

Welcome to a tutorial on how to create a CSS responsive navigation menu. In this guide, we will walk through 3 different variations of responsive navigation menu using only pure HTML and CSS – Read on to find out!

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

 

 

 

PREAMBLE

DOWNLOAD & NOTES

First, 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

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.

 

SECTION A

ICON MENU

In this first variation, we will have a “standard horizontal menu” with icons and text inline on the big screens, then transform into large icons with small text on the smaller screens.

 

THE HTML

1-icon.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

1-icon.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.

One
Two
Three
Four
Five

 

SECTION B

HAMBURGER MENU

This next variation is the famous hamburger menu, where we hide the items on small screens and show a menu button instead.

 

THE HTML

2-hamburger.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

2-hamburger.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

One
Two
Three
Four
Five

 

SECTION C

HIDDEN MENU

This final variation of the navigation menu is an alternative hamburger menu. Instead of showing it inline, we will fix the menu at the bottom of the screen.

 

THE HTML

3-hidden.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

3-hidden.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

One
Two
Three
Four
Five

 

 

EXTRA

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC

Responsive Navigation Menu (Click To Enlarge)

 

CLOSING

WHAT’S NEXT?

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

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