Divi | Move Divi's main header UNDER the page’s slideshow/hero section.

move-divi-main-header.js

jQuery("#main-header").insertAfter("body.home.desktop #main-content article .entry-content #above-header");

style.css

/* we moved the header via jQuery, so we need to get rid of the
excess padding and margin that the theme thinks it still needs,
even though the header isn't fixed anymore */
body.home.desktop #page-container {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* we don't want fixed header since it needs to stay below the hero at all times */
body.home.desktop #main-header {
	position: relative !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}
/* remove the top padding that containers normally get, when inside the page content */
body.home.desktop #main-content #main-header .container {
	padding-top: 0 !important;
}
body.home.desktop #main-content #main-header .container ul {
	padding: 0;
	list-style-type: none;
}

@media (min-width: 981px) {
	/* even when fixed, let's keep same padding as normal header (which comes from theme settings based on height) */
	body.home.desktop #main-header.et-fixed-header #et-top-navigation {
		padding-top: 33px;
	}
	body.home.desktop #main-header.et-fixed-header #et-top-navigation nav > ul > li > a {
		padding-bottom: 33px;
	}
}

We add jQuery to the “Footer” section of the Header Footer plugin.

1. Basically, we are targeting the #main-header (which is the entire wrapper for all of the header elements).
2. Then we’re telling it to inject it directly after the Section module that has an ID of above-header.
3. So you will need to add this ID to the Section Module Settings that you want to show above your header.
4. Also note the additional classes being targeted on the body element.
   This functionality will ONLY happen on the homepage, and only on desktop devices. The reason for the latter, is to ensure the mobile menu is easily accessible — particularly the hamburger menu dropdown.

We add additional CSS to our child theme stylesheet area, to help things a little.
Note that the CSS selectors are only targeting the homepage and only on desktop devices — just like our jQuery is doing. An additional few things to note about what the CSS is fixing and helping with:

1. Even though we moved the header with the jQuery, Divi still think the header should be fixed to the top, so we override that.
2. Since the header is no longer fixed to the top, we need to remove the excess top margin and padding that Divi normally adds to the page.
3. Menu items/links are technically list items, and now that the main menu is within the page content area, Divi tries to add bullets before each of the menu links. So, we undo that.
4. Even though the header will no longer be “fixed”, Divi still adds the et-fixed-header class to the main header, once the user scrolls. Generally, this causes the height of the main header to shrink. You can avoid the header from shrinking during scroll, by ensuring the top and bottom padding have the same pixel value as the “normal” state of the header. Those padding values are generated by Divi, based on the height you set your header to be — within the Divi Theme Customizer. So you could just use Chrome’s inspector tool, and inspect the header on a page to see what the padding values are, and update them accordingly (mine were 33px).