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