Make a Mobile Nav “Menu” Icon with Pure CSS

You know how Facebook and like, a million other websites, have those icons that look like three bars and when you click them a menu appears? Well you can certainly make those with images, or better yet icon fonts, but why not just use 100% Pure, Level 3 CSS?

Here’s just how you can do that. You’re HTML:

<a id="i-nav-display">Menu</a>

Your CSS:

#i-nav-display, #i-nav-display:after, #i-nav-display:before {
position:absolute;
width:35px;
height:5px;
background:white;
border-radius:20px;
}
#i-nav-display {
display:block;
text-indent:-999em;
right:15px;
top:25px;
}
#i-nav-display:after, #i-nav-display:before {
content:"\00a0";
left:0;
}
#i-nav-display:before {
top:-10px;
}
#i-nav-display:after {
top:10px;
}

Check this screenshot for an example of this in the wild at Wand’rly Magazine on iPhone / Android phones:

a screenshot of Wand'rly magazine's mobile version, showing the nav menu at the top right corner of the page.

Up Next: How to Override W3 Total Cache for Testing (in 14 words or less).