Three stripes should be such an easy thing to draw. Here’s a bunch of different ways to do it on the web. That said, SVG is definitely the nicest way to handle it. A hamburger menu is so simple that we can draw it by hand in SVG.
Three rectangles, evenly distributed:
<svg viewBox="0 0 100 80" width="40" height="40">
<rect width="100" height="20"></rect>
<rect y="30" width="100" height="20"></rect>
<rect y="60" width="100" height="20"></rect>
</svg>
Feel free to fiddle with those numbers to get the sizing and style you like.
Something awesome you might not know? SVG has rounded corners, just like CSS has border-radius
! It comes in the form of the rx
attribute. Check it out:
That might work better for your design if your design is softer and makes use of rounded stuff.
I’d code the first one (no rounded ends) using a
line
element, which results in an under150
bytes.svg
file (including thexmlns
attribute):The second one (rounded ends) can be coded with a single
path
(that draws 3 horizontalh
lines, which are basically the entire viewport width minus the stroke width in length):I usually do a hamburger with a
(or ) and some ::before and ::after with top and bottom borders. This also makes it easier to animate into an X icon if desired. And by easier I mean can use CSS transitions rather than SVG animations.
Many thanks for this great piece of code. I recently installed WordPress Theme 2022. I was unable to change the default 2 line hamburger icon to 3 lines without using a plugin. I inspected the site with Chrome browser, copied and pasted your code, and voila it did the trick.
One question. How can I add the text “Menu” after the button?
Thank you.