Source: https://www.elegantthemes.com/blog/divi-resources/fixing-your-responsive-navigation-menu-in-divi
For a standard Divi menu with centered logo above the menu
(only the drop down menu is being fixed to the top)
/* START fix mobile menu after scroll */
@media only screen and ( max-width: 980px ) {
#main-header.et-fixed-header #et-top-navigation {
position: fixed !important;
top: 0 !important;
bottom: auto !important;
left: 0;
}
#main-header.et-fixed-header #et-top-navigation #et_mobile_nav_menu {
margin-top: 0 !important;
}
#main-header.et-fixed-header #et-top-navigation .mobile_nav {
background-color: #fff !important;
border-radius: 0 !important;
border-bottom: solid 1px #cb148c;
}
.et_mobile_menu{
margin-top: -18px;
border-bottom: solid 1px #cb148c;
}
}
/* END fix mobile menu after scroll */Code language: CSS (css)
For a standard Divi menu with the logo on the left
(The main menu with logo and drop down menu icon)
/* START fix mobile menu after scroll */
@media only screen and ( max-width: 980px ) {
#main-header.et-fixed-header {
position: fixed !important;
top: 0 !important;
bottom: auto !important;
left: 0;
border-bottom: solid 1px #cb148c;
}
}xCode language: CSS (css)
Stick secondary menu on top
Source: https://divibooster.com/show-secondary-menu-items-in-secondary-menu-on-mobiles/
@media (max-width: 980px) {
#top-header, div#et-secondary-menu, ul#et-secondary-nav {
display: block !important;
}
#top-header .container {
padding-top: 0.75em !important;
}
}Code language: CSS (css)
Alternative
Not a good idea though, it takes too much space.
Source: https://divilife.com/create-fixed-mobile-menu-divi/
/* -- START fix menu on mobile -- */
@media all and (max-width: 980px) and (min-height: 479px) {
.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 !important; } }
.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}
/* -- END fix menu on mobile -- */
Code language: CSS (css)