How to Create a Fixed and Scrollable Dropdown Mobile Menu in Divi

By default, Divi theme didn’t have a fixed menu for mobile/tablets like on the desktop. This means that you won’t see the menu as soon as you start scrolling down the website on a mobile.

This topic will cover:

1. How to create a fixed mobile menu in Divi
2. How to create a scrollable mobile menu in Divi

On the Divi sub menu, click on the Theme Options > Go to Custom CSS box on the General option > Paste the following CSS code

Making the Menu Fixed on Mobile

@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header,
.et_non_fixed_nav.et_transparent_nav #top-header,
.et_fixed_nav #main-header,
.et_fixed_nav #top-header {
position: fixed;
}
}

Making the Mobile Dropdown Scrollable

When you have a lot of pages, and you open up the mobile menu, then a lot of your pages can get cute off below the fold of the website. And since it’s fixed to the top, if you scroll, it will simply scroll the page behind the menu, but keeping you from being able to access the additional menu links. Add the following code in addition with previous code,

.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}