Streaming live at 10am (PST)

Cannot add overflow hidden to the body

Hello! I’ve been trying to add overflow hidden to the body when the menu expanded, I’ve watched a couple of videos explaining how to do it, and I’ve followed through. However, it’s still not working. Any idea how to make this work? PS. I have added locomotive to this site, however, I don’t think it matters right? Thanks a lot in advance.

https://preview.webflow.com/preview/the-man-in-the-hat?utm_medium=preview_link&utm_source=designer&utm_content=the-man-in-the-hat&preview=2c2999410e087a100b8570e21e712a5e&workflow=preview


Hi @Daphne_wang never use this property on Body element. Please read this article

and/or feel free to find more information on this forum how apply it correctly.

Sorry to response even I’m not webflow-support

Hi Stan,

I think this article doesn’t apply. As I am trying to prevent any scroll event from happening, I just want to show the full-screen menu. so the overflow hidden needs to be in the body and not in any sections because the scroll will still happen.

Did you read it @Daphne_wang ?

I have, that’s why I don’t think this is applicable. Because when the menu is not showing, I do want scroll event happens, but whenever someone clicked the menu, the menu will slide down from the top and take over the full screen of the window. And at this moment I don’t want users to be able to scroll down to see the content.

Common practice is to not touch or rename Body element. Common practice is to create one div as page wrapper.

BTW in my experience LocomotiveJS is not working correctly on Webflow pages. Good luck with that. :wink:

I’ve just tried to add overflow hidden to the page wrapper, it’s still not working.

Hmm…locomotive is working ok for me. I don’t think that’s an issue, but thanks for letting me know.

Hi @Daphne_wang is your issue that site scroll when menu is open and thats cause reveal page content when scrolled down. Is your aim to prevent this behaviour? If yes I have solution.

Hi @Stan, not really, just that when I click the menu, it expands, but still can scroll down to see the content, I think it’s easier to see it on the published site because the preview doesn’t really show the javascript. https://the-man-in-the-hat.webflow.io/

Hi @Daphne_wang this is what I have describing (probably it was not clear enough) So I’m sorry for that.

Ohh, thanks for demonstrating it. This would work!

hi @Daphne_wang if this will work for you and don’t have any further question to this topic feel free to close your request. :wink:

one more question, why there are a lot of “beige area” when you record the video? Is it my settings problem? Because I didn’t see it on my designer view nor on the published site.

what do you mean @Daphne_wang? Can you specify? only biege color I see is from your bg color setting.

EDIT: do you mean under City image? It is because you site is not optimised for Safari. In Chrome this area is collapsed. Common Practice is to check site/pages in all major browsers, at least Chrome, Safari, Mozilla but also responsiveness, animations and all other things on mobile Operating systems Browsers as behavior may differ from Desktop browsers.

Oh yess…I’ve not check it on safari. But how can I fix it if it’s not the breakpoint issue but the browser?

No, it is unfortunately your page build and elements styling. For example using 100VH is not best practice try to shrink height of your browser and see what happened. I can’t cover these fixes in comments as It will take lots of time and writing to thing how to fix/rebuild this site or at least Head element. What’s more there is Locomotive included etc etc. Sorry but I would not be able to help with that.

You mean for the hero section? However, the other sections work fine even I’ve set the height to 100vh, it’s just the hero section, maybe that will narrow down where the issue is? Or you can tell me what would be best unit to use for both safari and chrome if it’s not vh…?

Is not about units but structure and thinking upfront how to build this part/element to be responsive in all browsers.

there must be something I can still do to fix it right? I don’t know how to attempt to fix it if I don’t know what I’ve done wrong :confused:

That’s normal feeling I have often too.
“It is not working and I have no clue why” or “It works but I have no clue why” :slight_smile: