(Help) Disable page scrolling with full screen menu

Hey everyone,

I am trying to publish my website in the coming weeks finally, but there’s one thing that I desperately need help fixing.

I have a full screen interaction menu, but when it’s open, the user can still scroll down and see the content below it on the page. I don’t know why it’s happening because the wrapper is set to “fixed”. I also tried absolute, and the JQuery from Nelson’s video and can’t seem to get it to disable.

Would a hide/show interaction work? I’m open to any suggestions you might have!

It’s in the “Main Nav” symbol, and the main wrapper that fills the screen is “Navigation”.

Thank you a billion to anyone that tries to help I appreciate it!

Here is my public share link: Share Link

1 Like

Hi @mjcensullo… I’m not sure if this might help or not. It seems what you’d like to do could be done with the regular nav element (versus using interactions). See the below link for a sample construction on a dummy site.

With the nav element selected, in the settings panel, open the menu bar. Then it’s possible to select the div surrounding the navigation links. That div can be set to fixed, and fill screen. When open, it prevents the user from scrolling. When it’s closed, scrolling works again.

Full Screen Fixed Menu Example

Here’s the Published Version

1 Like

Hey @LunarLight! Thank you for your response and suggestion. I see what you’re saying! So maybe I should rebuild it using the actual Nav element. I bet I can copy and paste some of the styling from my existing menu design into it so I don’t have to recreate it all… or hopefully I can.

I should still be able to have that circular interaction when the user clicks on the menu icon trigger right? Might just have to rebuild that interaction I’m guessing.

All in all, this seems like my best-option. Still wish I could just set to fixed and be done with it but doesn’t seem to work for some reason. Appreciate the response!

@mjcensullo I truly hope you can just copy and paste. I don’t see why not. No need to make this more difficult on ourselves… but is that the designer way? That drop down menu is just a regular div, so it certainly seems it could handle interactions as well.

Perhaps you’ve already run into it, but that nav hamburger is sensitive if you want to adjust where it appears on your screen. I break it often when I start messing with its position. I recommend going to the settings panel, selecting the Open Menu button and adjust the location and layout with the menu open. It swings wildly around and its nice to see when things are getting out of hand.

LOVE your logo btw. It’s going to be an awesome site.

So it appears interactions can easily be added to drop down menu divs. Wow… what a cool idea of yours to do that. The possibilities are endless.

Jet Interaction Within Drop Down Menu

Sorry for the late reply, had a work trip and didn’t get to revisit this until a couple nights ago. I resolved it for now for the most part! I just rebuilt it with the Nav element. Doesn’t have the same exact replicated effects, but it’ll do and I’m happy with it!

Share Link

1 Like