big-red-hamburger.scss

.big-red-hamburger {
  display: inline-block;
  cursor: pointer;

  .bar1, .bar2, .bar3 {
    border-radius: 5px;
    width: 44px;
    height: 8px;
    background-color: red;
    margin: 6px 0;
    transition: 0.4s;
  }

  &.cross {
    .bar1 {
      -webkit-transform: rotate(-45deg) translate(-7px, 6px);
      transform: rotate(-45deg) translate(-10px, 10px);
    }
  }
  
  &.cross {
    .bar2 {
      opacity: 0;
    }
  }

  &.cross {
    .bar3 {
      -webkit-transform: rotate(45deg) translate(-6px, -6px);
      transform: rotate(45deg) translate(-10px, -9px);
    }
  }
}