Last active
November 17, 2020 06:53
-
-
Save Garconis/5e4e331a7b6e26d36ad0860673c7809a to your computer and use it in GitHub Desktop.
Divi | Move Divi's main header UNDER the page’s slideshow/hero section.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery("#main-header").insertAfter("body.home.desktop #main-content article .entry-content #above-header"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
We add jQuery to the “Footer” section of the Header Footer plugin.
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: