Hamburger icons, used to indicate a mobile menu, are everywhere these days. This simple, three-lined visual (reminiscent of a hamburger bun with the meat in the center, thus the name!) is the universally-known symbol for a menu. Our Logical Imagination site uses one - if you are reading this on a mobile device, you can see it at the top (if not, resize your browser to be really narrow, and you'll see it!)

Most sites that I have worked on include an icon font such as Font Awesome or IcoMoon or one of many others. Almost all font sets include a character that will display a hamburger icon, so it is almost a no-brainer to use that icon for the hamburger menu. Here is the one from Font Awesome:

But recently I was working on a small website that did not need an icon font, and we were reluctant to incur the bandwidth download of an entire font just for a hamburger. So I tried to get the same look with only CSS styling. If you size the element properly, a thick top border and a thick bottom border can give you two bars, but the hamburger traditionally has three bars (surprisingly, a tradition that is older than I thought - all the way back to the early 1980's - read about it here).

That's when I turned to the too-seldom-used :before and :after pseudo element selectors. Using either of them provides a way to get the third bar (and if you wanted a fourth bar, you could use both!)

A simple empty element:

<div id="mobileNav"></div>

can be turned into a hamburger with only a small amount of CSS.

The first two bars:

#mobileNav {
box-sizing: content-box;
width: 25px;
padding-top: 4px;
padding-bottom: 4px;
border-top: 4px solid #000000;
border-bottom: 4px solid #000000;
}

and the third bar:

#mobileNav:before {
content: "";
display: block;
width: 100%;
height: 4px;
background-color: #000000;
}

That's it! You can view a working JSFiddle of it here. If you need CSS training, consider registering for our HTML5 and CSS3 Fundamentals course.

by Drew on 03.05.2018