Add a Custom Fixed Header for Mobile Using Divi.

Acknowledgments to Elegant Themes. I didn’t come up with this. I am just storing it here for easy future reference. Add the following CSS to the Custom CSS in Theme Options.

@media (max-width: 980px) {
 
/*********************************
style mobile fixed header
*********************************/
 
.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}
 
.et-fixed-header .logo_container {
height: 55px;
}
 
.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}
 
/*********************************
make mobile fixed header navigation icon larger
*********************************/
 
.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}
 
.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}
 
.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
 
/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}
 
}