HTML content desplaced when main menu is opened

Hi there folks 👋🏼 I have a main menu with several levels. To open the second level and display its items, you have to click on the first level. At that moment, a shape transparent white layer appears, and over this layer the menu displayed. The page has vertical scroll, to avoid scrolling with the menu displayed, an "overflow: hidden;" is added to the <body> when the menu is open. As you can see in the image, this causes the content to scroll a bit horizontally, causing a very annoying effect. Do you know how I can avoid this annoying effect? Thanks a lot!
No description
6 Replies
vince
vince11mo ago
I don't think there's much you can do about it - you're using overflow: hidden, so that tells the browser to remove the scrollbar - and then all the content reshifts accordingly. Maybe there is some way but I'm unsure
clevermissfox
clevermissfox11mo ago
Can you post a codepen or GitHub repo with your code please. You probably need to make the overlays position absolute to take it out of the document flow so it doesn’t push anything else out of the way
👻Ghost in Your pants👻
i dont think you should ever use overflow hidden it creates a lot of problems
Jochem
Jochem11mo ago
It's a tool like any other Sometimes hiding overflow is preferable to breaking a layout with unknown content width for example
Captain Chewie
Captain Chewie11mo ago
yeah position absolute could help it then maybe adjusting the z-index if it goes behind anything
vince
vince11mo ago
I think the dropdown may already be absolute, I think it's more of a scrollbar issue but not sure
Want results from more Discord servers?
Add your server