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
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
<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; }
- 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.
- We set the layout of the menu to
- 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>℄</i> One</a>
<a href="#"><i>ℋ</i> Two</a>
<a href="#"><i>ℇ</i> Three</a>
<a href="#"><i>℈</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; }
- It’s the same
display: flex
andwidth: 100%
mechanism as the previous example. - 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">☰</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:
- The hamburger menu icon itself. Take note of the checkbox here, we will use this to toggle show/hide on small screens.
- 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; }
- On the big screens:
- The same old story yet again,
display: flex
andwidth: 100%
. - Hide the hamburger icon since we don’t need to use it –
#hamNav label, #hamburger { display: none; }
- The same old story yet again,
- 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; }
- Show the hamburger icon –
EXTRA 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
- CSS Hamburger Menu – Code Boxx
- Using media queries – CSS: Cascading Style Sheets | MDN
TUTORIAL VIDEO
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!