hamburger.scss

  .hamburger {
    padding-left: 10px;
    width: 50px;
    height: 50px;
    float: right;
    cursor: pointer;
    > div {
      margin: 18px 0 0 6px;
      width: 30px;
      height: 20px;
      position: relative;
      > span {
        transition: 0.3s;
        transform: rotate3d(0,0,1,0deg);
        height: 2px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #333;
      }
      > span:nth-child(2) {
        top: calc(50% - 2px);
      }
      > span:last-child {
        top: calc(100% - 4px);
      }
    }
    &:not(.nav-active):hover {
      > div {
        > span {
          top: calc(50% - 2px);
        }
        > span:nth-child(2) {
          transform: rotate3d(0,0,1,-90deg);
        }
      }
    }
    &.nav-active:hover {
      > div {
        > span {
          top: calc(50% - 2px);
          transform: rotate3d(0,0,1,-45deg);
        }
        > span:nth-child(2) {
          transform: rotate3d(0,0,1,45deg);
        }
      }
    }
  }