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

 

 

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.

 

 

 

EXAMPLE 1) COLLAPSING MENU

1A) THE DEMO

 

1B) THE 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

/* (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

<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

/* (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

<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

/* (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;
  cursor: pointer;
}
#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; }

 

 

 

LINKS & REFERENCES

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

 

TUTORIAL VIDEO