Can’t hide overflow-x in a media query

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

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.

Method 3

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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x