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

CodePudding user response：

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.

CodePudding user response：

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.

1. Add overflow-x: hidden to the body element.
2. Set the correct width to the above elements.

CodePudding user response：

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.