I have a header with menu, which is changed to burger menu when screen width is smaller than 650px. After that menu is positioned as absolute and translated to the right. When I click on burger menu it slides into view. Afterwards everything works, but I can't make overflow disappear. I tried to experiment with adding overflow to different parent elements, but to no avail.
Here is the page - https://badgerwannabe.github.io/rocket-sockets/index.html Here is a Github rep with files enter link description here
Would be grateful for any help.
UPD1: Steps to reproduce Go to the website, open Dev Tools and resize the viewport to less that 650px of width, try to scroll to the right and you'll see the problem. Adding overflow to body at this media query does not help
If you add overflow: hidden to the body element when you open the menu I think that's what you're looking for. If not, can you specify further what overflow you are trying to get rid of?
Edit: based on the comment, if you add overflow-x: hidden to the body tag, that should do it for you.
The issue is happening because of the following elements.
...
<img class="background-line" alt="background-line" src="assets/images/Path 18.png">
...
<img id="mailbox-sm" src="assets/images/Mask Group 4.png" alt="small mailbox">
...
There are two options.
overflow-x: hidden to the body element.When you translate the menu to the right (ie out of view) you could also set it
display: none;
setting it back to
display: flex
when you want it to slide into view.