-1

This won't work for a reason, I think with by using DIV is a different story, could someone please enlighten me? Many thanks!

.bar1,
.bar2,
.bar3 {
  width: 20px;
  height: 20px;
  background-color: black;
}
<div class="burger-menu">
  <span class="bar1">1</span>
  <span class="bar2">2</span>
  <span class="bar3">3</span>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
razvan girgiz
  • 1
  • 1
  • 2

1 Answers1

2

By default span elements are inline, you can't apply height and width to inline elements. In order to apply height and width, you either make them as block or inline-block.

.bar1, .bar2, .bar3{
   width: 20px;
   height: 20px;
   background-color: black;
   display:block
}

In addition to this, in this video I've explained how you can make hamburger menu using only one div with animation. https://youtu.be/Y2yW1-QYQco

Rahul
  • 5,594
  • 7
  • 38
  • 92