How to make mobile header stop scrolling when nav is open

I’m trying to make my mobile nav header static when the menu is closed so it scrolls with the body, but fixed when opened so the user can’t scroll the page. Any help is appreciated. Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/hair-by-the-beach-f22678c77e07d1b3dd818?utm_medium=preview_link&utm_source=designer&utm_content=hair-by-the-beach-f22678c77e07d1b3dd818&preview=ec91da873c2b9dd1f401e599267fb193&workflow=preview
(how to share your site Read-Only link)

@Gmar07 Do you mean you want the nav fixed to the top and then when the user opens the menu it stops scrolling?

No I have it static. I don’t want it fixed to the top. I want the nav to move with the body when it’s not open, but I want it fixed to the top when the navmenu is open so it doesn’t scroll.

Ok, If you look at the screenshot, I made the nav position fixed, and now it moves down as the user scrolls.

If you want the site to stop scrolling when the menu is open, you will need some custom code.
Check out this video

The jQuery builder tool is really awesome check it out.

Let me know if that works for you.

You can make fixed CSS for the menu portion. Actually, this can be easily solved with some mobile app development blog references too.

solve this issue with the help of cs code. maybe as positioned as absolute or position fixed. some sies required Z-index in CSS too. If you can’t fix it, you can contact the best custom software developer to solve this issue.