WordPress Divi site mobile menu not scrolling

0
votes

I have a wordpress site running an ET Divi child theme and on mobile the main menu does not scroll on touch, instead the background (website) scrolls. I've been trying several media queries and such to fix but cannot figure it out, anyone have thoughts or run into this before? Here is my child theme stylesheet add-on code:

the website is wptemp.thereverendmichael.com (make sure to adjust width for mobile viewing only)

@media (max-width: 980px) {
#main-header {
position: fixed !important;
}
}

@media (max-width: 980px) {
.et_fixed_nav #top-header {
    position:fixed !important;
}
#mobile-menu {
    overflow-y:scroll!important;
    -overflow-scrolling:touch!important;
    -webkit-overflow-scrolling:touch!important;
}
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d";
}
1
htmlcsswordpress

1 Answers

5
votes

Sorry, I figured it out with a bit more playing. Here was the solution

EDIT: Future Divi versions have changed .et-mobile-menu to .et_mobile_menu just thought I'd give a heads up.

.et_mobile_menu {   
    overflow-y:scroll!important;
    max-height:80vh!important;
    -overflow-scrolling:touch!important;
    -webkit-overflow-scrolling:touch!important;
}