style.css

.hamburger {
    display: block;
    width: 26px;
    height: 20px;
    position: relative; }
  .hamburger__line {
    display: inline-block;
    height: 2px;
    width: 100%;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%); }
  .hamburger__line:before, .hamburger__line:after {
    content: '';
    display: inline-block;
    height: 2px;
    width: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0; }
  .hamburger__line:before {
    -webkit-transform: translateY(-7px);
        -ms-transform: translateY(-7px);
            transform: translateY(-7px); }
  .hamburger__line:after {
    -webkit-transform: translateY(7px);
        -ms-transform: translateY(7px);
            transform: translateY(7px); }
  .hamburger__line.active {
    background-color: transparent; }
  .hamburger__line.active:before {
    -webkit-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
            transform: translateY(0) rotate(-45deg); }
  .hamburger__line.active:after {
    -webkit-transform: translateY(0) rotate(45deg);
        -ms-transform: translateY(0) rotate(45deg);
            transform: translateY(0) rotate(45deg); } }