Creating a CSS only Hamburger Menu Icon (no Images or Icon Fonts)

In this post, I will be sharing CSS code snippet for creating a hamburger menu without any Images or Icon Fonts. Hamburger menu are often used in responsive web design to depict an expandable list of menu. It is possible to create this three line menu icon with only CSS, and we will see how in this post.

Why use CSS only Hamburger menu icon

When designing minimal websites, you may not desire to load unnecessary Icon Fonts such as Font Awesome or extra images just to create one small hamburger menu icon. It is best to use a CSS only Hamburger menu icon is such cases to avoid extra resource request calls for the website.

The CSS, we will be writing for creating our Hamburger menu icon will be supported by many old browsers too and therefore it’s a better option than to use SVG or Icon Fonts which are generally not supported by older browsers and require additional fallback methods.

Pure CSS Hamburger Menu Icon

If you are wondering, how is it possible to draw three lines in same element with CSS, then the answer to that is pseudo elements. As seen in the CSS snippet below, we are drawing top and bottom border to the hamburger element. For the third line which will draw in between, we are using the :before pseudo class using which, we are able to absolute position our third line in between the first two.

CSS

.hamburger {
    position: relative;
    display: inline-block;
    width: 1.25em;
    height: 0.8em;
    margin-right: 0.3em;
    border-top: 0.2em solid #fff;
    border-bottom: 0.2em solid #fff;
}

.hamburger:before {
    content: "";
    position: absolute;
    top: 0.3em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #fff;
}

As you can see, I used em instead of px so the menu drawn will be scalable relative to the font size. Once we have this CSS in place, using the HTML snippet below, we can create our hamburger menu.

HTML

<span class="hamburger"></span> Menu

Demo

Find the full code and demo on my pen at CodePen or see the embed below:

See the Pen CSS only Hamburger menu by Kanishk Kunal on CodePen.

Bonus CSS icons