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!
6 Replies
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 unsureCan 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
i dont think you should ever use overflow hidden
it creates a lot of problems
It's a tool like any other
Sometimes hiding overflow is preferable to breaking a layout with unknown content width for example
yeah position absolute could help it
then maybe adjusting the z-index if it goes behind anything
I think the dropdown may already be absolute, I think it's more of a scrollbar issue but not sure