It started with this tutorial from yatesdesign, but I wanted it a little different with the secondary menu bar staying at the top. So do this:

1. Keep the fixed navigation bar in the Divi Theme Options to Enabled.
2. Make sure the height of the primary menubar and fixed navigation settings are the same.
3. Install the plugin Sticky Menu (or Anything!) on Scroll
   1. Set Sticky Element: * ? to: #main-header
   1. Set “Do not stick element when screen smaller than: (optional) ?” to: 981 pixels.
   1. In the Advanced Settings tab, enable Legacy Mode.
4. Add a Fullwidth Section to the top of your page
   1. Add a Fullwidth Header Module
   1. Set Make Fulllscreen to Yes
   1. In the Custom CSS tab add this to the Main Element section:
      padding: 0 !important;
5. Add the below to your page’s Custom CSS.

@media only screen and ( min-width: 981px ) {
 #main-header.sticky-element-original {
 position: absolute;
 bottom: 1px;
 top: auto !important;
 }
 .et_header_style_left .logo_container {
 left: 0;
 }
 
#logo {
 padding-left: 30px;
 }
.et_pb_fullwidth_section {
margin-top: -80px;
}
}
Code language: CSS (css)