Mobil Menüdeki Tıklama Animasyonu Sayfada Scrollbar Oluşturuyor, Nasıl Engelleyebilirim?

Sitenin mobil menüsünde 3 tane span var ve bunlar tıklama ile CSS animasyonuyla menü icon'undan kapat icon'una dönüyor. Ortadaki span ekranın dışına çıkıp kayboluyor ama bunu yaparken sayfayı da genişletiyor. Sayfa genişlediği için de yatay kaydırma çubuğu oluşuyor. Aşağıdaki kod ile bunu engelliyorum, bu seferde animasyon düzgün çalışmıyor. Doğru kodlama nasıl olmalı?

Uyguladığım CSS:

.menu-button {
    overflow-x: hidden;
}

İlgili HTML kodları:

<div class="menu-button">
    <span></span>
    <span></span>
    <span></span>
</div>

1.seçenek 2.span'ı sağa kaydırmayın opacity'i 0'a düşürün.
2.seçenek Header'a overflow-x: hidden verin.

Bunlardan herhangi birisini yaparak çözüme ulaşabilirsiniz.

span'ı kaydırmak hoşuma gitti hocam. Birkaç yerde daha görünce iyice yapmak istedim ve yaptım ama bu sorunu aşamadım.

tamindir ve webrazzi'nin menü iconları da bu şekilde.

Söylediğim gibi o halde header'a Overflow-x: hidden verirseniz sorununuz çözülür scroll çıkmaz.

Tamamdır hocam hallettim. Teşekkür ederim.