ハンバーガーメニューの三本線をクリックされたらxにしたい

Question

    &.active span:nth-of-type(1) {       //クリックしたら☓ボタンになるように切り替え真ん中の線を消して、上下の線を☓にする。
      transform: rotate(45deg) translate(50%,0);
      transform-origin: 0% 50%;
    }
    &.active span:nth-of-type(2) { //真ん中の線を透過
      opacity: 0;
    }
    &.active span:nth-of-type(3) {
      transform: rotate(-45deg) translate(50%, 0);
      transform-origin: 0% 50%;
    }

現在三本線をクリックしたら、❌の右側半分しか表示されません。
どのようにしたらもう半分表示できますでしょうか？

Comments

[Lhankor_Mhy]

HTMLをご提示ください。
また、SCSSもブロック全体をご提示いただけますか？