.menu-toggler {
    cursor: pointer;
    width: 30px;
}
  
.menu-toggler:before,
.menu-toggler:after,
.menu-toggler div {
    background: black;
    content: "";
    display: block;
    height: 3px;
    border-radius: 3px;
    margin: 6px 0;
    transition: 0.5s;
}
.menu-toggler.active:before {
    transform: translateY(8px) rotate(135deg);
}
.menu-toggler.active:after {
    transform: translateY(-10px) rotate(-135deg);
}
.menu-toggler.active div {
    transform: scale(0);
}