How can I create the lines for a hamburger menu and change the width?

How can I create the lines for a hamburger menu and change the width?
0

I have been trying to do this for days, I cannot figure this out. Please help. I have erased everything I tried. Is there a good tutorial out there somewhere? As common as it is, I dont see many straight forward tutorials. I do not want a circle around it! I just want the three lines to be different sizes. How can i do this with css?

It would be nice to see what you have tried. If you have a Codepen or something we can see it would help.

Anyway, if you are using an element with two pseudo elements for the lines, you can just make them different widths.

Edit: can you show an example of what it is you want?

I wanted something like this! Except in reverse and the length of the middle line switches places with the top line. Closest example of what I wanted. Their menu is a bit difficult to see, but its on the top left.
This is what my code looks like right now. I’m starting to get confused with all these div classes.

They’re just using their own image file instead of the standard icon that most people use for a hamburger menu.

1 Like

Here is an example of what I mean by using pseudo elements

1 Like

Hi, for example:

1 Like
.navicon {
  width: 112px;
  height: 47px;
/*   border-bottom: 1px solid black; */
  position: absolute;
  
  display: flex;
  flex-direction: column;
}

.navicon span {
  display: block;
}

.navicon span:not(:last-child) {
  margin-bottom: 6px;
}

.navicon span:nth-child(1) {
  width: 20px;
  height: 2px;
  
  background-color: red;
}

.navicon span:nth-child(2) {
  width: 30px;
  height: 2px;
  
  background-color: red;
}

.navicon span:nth-child(3) {
  width: 20px;
  height: 2px;
  
  background-color: red;
}
1 Like

You. are amazing. Thank you.

1 Like

Thank you so much. You guys blew my mind.

1 Like