3 Very Simple Responsive Navigation Menu (Free Download)

Welcome to a tutorial on how to create responsive navigation menus in HTML and CSS. So you want to create a menu that is “mobile-friendly”? It is definitely not as difficult as some may think – Let us walk through a few simple examples of responsive navigation menus in this guide, read on!

ⓘ 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 & Notes Responsive Menus Useful Bits & Links
The End

 

DOWNLOAD & NOTES

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.

 

 

RESPONSIVE MENUS

All right, let us now get into the common examples of responsive menus in HTML and CSS.

 

EXAMPLE 1) COLLAPSING MENU

1A) THE DEMO

 

1B) THE HTML

1-icon.html
<nav id="collapseNav">
  <a href="#">Menu A</a>
  <a href="#">Menu B</a>
  <a href="#">Menu C</a>
  <a href="#">Menu D</a>
</nav>

Yes, there is nothing “special” when it comes to building a responsive menu. Just sandwich <a> links inside a <nav> as usual.

 

1C) THE CSS

1-icon.html
/* (A) HORIZONTAL MENU ON BIG SCREEN */
#collapseNav { display: flex; }
#collapseNav a { width: 100%; }

/* (B) SMALL SCREEN - COLLAPSE INTO SINGLE COLUMN */
@media only screen and (max-width: 768px) {
  #collapseNav { flex-wrap: wrap; }
}

/* (X) NOT IMPORTANT - COSMETICS */
#collapseNav a {
  padding : 10px;
  color: #fff;
  text-decoration: none;
  background: #333;
}
#collapseNav a:hover { background: #8a2222; }
  1. To create a “regular horizontal menu” on big screens.
    • We set the layout of the menu to display: flex.
    • Then add width: 100% on the menu items.
    • Done. The browser will automatically space out all the menu items in a horizontal manner.
  2. For the newbies, @media is what we call a “media query”, these styles will only apply on small screens. Very simply, flex-wrap: wrap will allow the menu items to wrap into new lines. This effectively collapses the horizontal bar into a single column.

 

 

EXAMPLE 2) ICON MENU

2A) THE DEMO

 

2B) THE HTML

2-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>
</nav>

The icon menu maintains a horizontal layout on both big and small screens. But on the smaller screens, we will set bigger icons for easier navigation.

  • Same old sandwich <a> links inside the <nav>.
  • But we add <i>ICON</i> tags to act as icons.

P.S. Check out Toptal for a complete list of the available HTML symbols.

 

2C) THE CSS

2-icon.css
/* (A) HORIZONTAL MENU ON BIG SCREEN */
#iconNav { display: flex; }
#iconNav a { width: 100%; }

/* (B) SMALL SCREEN - LARGE ICON SMALL TEXT */
@media only screen and (max-width: 768px) {
  #iconNav a { text-align: center; }
  #iconNav i {
    display: block;
    font-size: 2em; 
  }
}

/* (X) NOT IMPORTANT - COSMETICS */
#iconNav a {
  padding : 10px;
  color: #fff;
  text-decoration: none;
  background: #333;
}
#iconNav a:hover { background: #8a2222; }
  1. It’s the same display: flex and width: 100% mechanism as the previous example.
  2. But on the small screens, we set a bigger icon and let force the text into a new row – #iconNav i { display: block; font-size: 2em; }

 

 

EXAMPLE 3) HAMBURGER MENU

3A) THE DEMO

 

3B) THE HTML

3-hamburger.html
<nav id="hamNav">
  <!-- (A) HAMBURGER ICON -->
  <label for="hamburger">&#9776;</label>
  <input type="checkbox" id="hamburger"/>

  <!-- (B) MENU ITEMS -->
  <div id="hamItems">
    <a href="#">Menu A</a>
    <a href="#">Menu B</a>
    <a href="#">Menu C</a>
    <a href="#">Menu D</a>
  </div>
</nav>

The Hamburger Menu is probably one of the most common designs in the world. On big screens, it is a “normal” horizontal menu. But it breaks down into a single column on small screens, show/hide toggled by clicking on a menu icon. The HTML should be pretty self-explanatory:

  1. The hamburger menu icon itself. Take note of the checkbox here, we will use this to toggle show/hide on small screens.
  2. Same old “sandwich links in a container”.

 

3C) THE CSS

3-hamburger.css
/* (A) ON BIG SCREEN */
/* (A1) HORIZONTAL MENU */
#hamItems { display: flex; }
#hamItems a { width: 100%; }
 
/* (A2) HIDE HAMBURGER ICON */
#hamNav label, #hamburger { display: none; }

/* (B) ON SMALL SCREEN */
@media only screen and (max-width: 768px) {
  /* (B1) SHOW HAMBURGER ICON */
  #hamNav label { display: inline-block; }
 
  /* (B2) BREAK ITEMS INTO SINGLE COLUMN */
  #hamItems { flex-wrap: wrap; }
 
  /* (B3) TOGGLE SHOW/HIDE */
  #hamItems { display: none; }
  #hamNav input:checked ~ #hamItems { display: flex; }
}

/* (X) NOT IMPORTANT - COSMETICS */
#hamNav label { font-size: 1.5em; }
#hamNav { background: #333; }
#hamNav, #hamItems a {
  padding: 10px;
  color: #fff;
  text-decoration: none;
}
#hamItems a:hover { background: #8a2222; }
  1. On the big screens:
    • The same old story yet again, display: flex and width: 100%.
    • Hide the hamburger icon since we don’t need to use it – #hamNav label, #hamburger { display: none; }
  2. On the small screens:
    • Show the hamburger icon – #hamNav label { display: inline-block; }
    • Collapse the menu into a single column – #hamItems { flex-wrap: wrap; }
    • Hide the menu by default – #hamItems { display: none; }
    • Finally, show the menu when the checkbox is checked (click on menu icon) –#hamNav input:checked ~ #hamItems { display: flex; }

 

 

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

 

THE END

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.