No more extra scrollbars when using overflow-x

Key Takeaways

if you've ever had a menu that you wanted to like slide in off from off screen and and move back off you might have run into this issue where while it's animating it's actually causing some horizontal scrolling so here I'm just doing it with a translate as it it moves off and then we remove the translate when it gets to here so when it's open there's no problems but this is annoying and what you often people will do is go on the header CU my navigation is inside of there and I'll do an overflow X of hidden and one of the more annoying things with CSS happens where this ends up scrolling here and my menu is now like locked into being inside of my header for some reason it's just feels really weird and it's because when we do an overflow on the x axis and we change it to Hidden we can't leave the y as visible it changes the Overflow in the other direction to Auto which if you've used auto before you know if there is overflowing content then it gets a scroll bar instead it's absolutely infuriating you end up having to put it on your body and then your HTML and there's these weird circumstances you can end up with a double scroll bar well instead of that now we can just use clip instead and clip just solves the problem it's completely gone it will prevent the Overflow in that one direction that you want it but it will allow the Overflow in the other direction to stay as visible and everything works the way you want it to don't just hide a menu the way I'm doing it here you probably want to display none it to remove it from the Dom when it's off the screen CU if someone's keyboard navigating you don't want them getting stuck in there if you want to know how you can animate to display none we can do that in CSS now too and there should be a related video showing up somewhere on the screen right now now if you want to see how that works