Solved:
Go to
Finsweet!
- In Trigger settings:, from the Trigger on dropdown menu, select Click. In the Trigger class / ID field, enter the class assigned to your site’s modal open & close trigger element or button. Example: “.menu-button”
- In Action on: select 1st Click and click the + New pair button.
- Now below 1st Click, in the Trigger class / ID field, enter the class assigned to your site’s Body. Example: “.body”. Leave Affect set to All elements with this class. Click the Add class button. In the Class to add field, enter “no-scroll”.
- In Action on: select 2nd Clickand below it, click the + New pair button.
- Now below 2nd Click, in the Trigger class / ID field, enter the class assigned to your site’s Body. Leave Affect set to All elements with this class. Click the Remove class button. In the Class to remove field, enter “no-scroll”. Copy the resulting code.
- In Webflow, go to your site’s Settings and select Custom Code. Scroll down and paste the code into the Footer code field (before body tag) and click Save.
- For the script to work, you must create the “no-scroll” class! In Webflow Designer, go to Navigator and select Body. In Style, below Style Selector, click on the class name and select Remove Class. Now add the new class “no-scroll” to the body. Scroll down to Overflow and set it to Hidden (eye with a slash icon). Go back up to In Style, below Style Selector, click on the new class name “no-scroll” and select Remove Class. Now add back the original body class.
- Publish your site. Click Publish and Publish to selected domains. The custom code only effects the published site, viewed in a browser. You will not see the effect of custom code in the Designer preview.
- This solution involves custom code. Please be aware that Webflow Support regards sites and pages which use custom code “outside of their Scope” and they will not assist you with any related issues.