Disable Page Scrolling When Divi Fullscreen Menu Is Open
In this tutorial I will show you how to disable page scrolling when Divi theme Fullscreen menu is open.
If you use Divi theme’s Fullscreen menu style on your website you’re likely aware that the default behavior allows scrolling the page when the menu is open.
This aspect is not ideal in terms of user experience since visitors may unknowingly scroll the page while the fullscreen menu is open, leading to confusion once the menu is closed.
As a bonus, I’ll show how to disable page scrolling for the Slide-In menu style as well, the CSS snippet is similar to the one used for the Fullscreen menu style.
And if you are using Divi MadMenu for creating fullscreen and slide-in menus then I have good news for you: the Stop Page Scroll feature allows you to disable page scrolling with a click.
Contents
How it works
To make the page unscrollabe all we need to do is to apply the overflow: hidden; CSS rule to the <body> element when either of the menus is open (Fullscreen of Slide-In).
Detecting the open state for both Fullscreen and Slide-In menus is easy since Divi toggles specific CSS classes for the <body> element when these menus are toggled.
For the Fullscreen menu the corresponding CSS class is et_pb_fullscreen_menu_active, and for the Slide-In menu it is the et_pb_slide_menu_active class.
So, we disable scrolling for the <body> element when either of these classes is added to it depending on the menu style used (Fullscreen or Slide-In).
Disable page scrolling when Divi Fullscreen menu is open
To stop page scrolling when Divi Fullscreen menu is open we need to use this simple custom CSS:
/**
* Stop page scroll when Divi theme Fullscreen menu is opened.
* @author Ivan Chiurcci
* @site https://divicio.us
*/
body.et_header_style_fullscreen.et_pb_fullscreen_menu_active {
overflow: hidden;
}Disable page scrolling when Divi Slide-In menu is open
If you need to stop page scrolling for when the Slide-In menu opens then use this CSS:
/**
* Stop page scroll when Divi theme Slide-In menu is opened.
* @author Ivan Chiurcci
* @site https://divicio.us
*/
body.et_header_style_slide.et_pb_slide_menu_active {
overflow: hidden;
}Disable page scrolling with a click using Divi MadMenu
If you are using Divi MadMenu to create fullscreen and slide-in menus using the header popups feature you can stop page scrolling with a single click in the module settings.
All you need to do is to enable the Stop Page Scroll feature added to the Button element in v1.9.4.
Clicking the button (aka the popup toggle) to open the popup menu (or just a popup) will disable page scroll on frontend.
The page will become scrollable again after the menu/popup is closed.
Final Thoughts
Disabling the page scrolling when fullscreen menu opens is one of the Divi header related questions I’m being asked frequently. So, I’ve decided to create this easy tutorial available to everyone. As you can see, the implementation is really simple, and I hope it is helpful. Feel free to share your thoughts and suggestions in the comments section below.
Nice job Ivan…you stay pretty close to the issues and needs for the menu in Divi. Always nice to see your efforts!
Thank you, Dehn. :)