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

1

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?

2

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?

3

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.

4

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

image
image703×26 1.54 KB

1 Like
5

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

1 Like
6

Hi, for example:

A Pen by niavon 2020-01-13 18-39-51
A Pen by niavon 2020-01-13 18-39-512060×2038 573 KB

1 Like
7 
.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
8

You. are amazing. Thank you.

1 Like
9

Thank you so much. You guys blew my mind.

1 Like