How to make a hamburger menu icon in CSS CSS

You don't need to use an image for a 3 line hamburger menu icon, it is better to make a menu icon with CSS because you can make it look and behave exactly as you want. Here is how to make a hamburger menu icon with CSS.

First, we'll create the HTML for our menu icon. Since we'll use the same markup for an animated hamburger menu icon, we won't use the ::before and ::after pseudo elements, but instead we will create 3 internal elements.

I've used div elements because they are block level elements and we know we want the menu bars/lines to stack vertically. You can use span elements if you like but you'd have to declare display: block; on them because span elements are inline by default.

Anchor a tags are inline elements by default, so we'll add a display property for the menu icon button/link and set the value to inline-block.

Next we can target all 3 inner elements in the CSS and apply styles to give them some spacing, dimensions, color and rounded corners.

Here is the menu icon we've created with this code:

It's as simple as that!

To increase or decrease the space between the lines, increase or decrease the margin property of the inner elements.

For a menu icon with thicker or thinner lines, increase or decrease the height property of the inner elements. You may also want to adjust the border-radius property to half of the new height to round the corners.

To adjust the width of the menu icon lines, adjust the width property of the inner elements.

You change the color of the menu icon by changing the background property on the inner elements because these are shapes. The color property wouldn't do anything because that applies color to text and our shapes don't contain any text.

In your implementation, you might also want to add some padding around the menu icon to increase the size of the clickable/tappable area if you don't already have padding defined for all of your navigation links. You can add some padding around your hamburger menu icon like this.

Thanks for reading.
Ryan

Published on 18 Jul 2022