24 Aug Different headers in Divi
I was building a Divi site for a client and they wanted a dramatically different looking header for interior pages. See below for the two header variations.
Interior page header
The visual differences couldn’t be accomplished with CSS alone. There had to be some structural changes to handle the positioning of the secondary navigation, primary navigation, and search bar. In order to accomplish this, I created 3 copies of
header.php in my
Divi-child theme and renamed them as follows:
The idea is to keep all of Divi’s variables in
header.php and only include the structural changes in
header.php, I kept all of Divi’s code up until the logic to start rendering the
top-header and deleted the rest. In Divi version 3.12, the code to render
top-header starts on line 56. So
header.php ended on line 54 with the closing PHP tag, after Divi’s PHP variables are set.
header_interior.php, I deleted up until line 56. Then, I made the structural changes to the markup that I needed to accommodate both header layouts.
Now, I needed to include the conditional logic to load the appropriate header layout in
get_template_part, would’ve been ideal, but there is no way to pass variables to
get_template_part, so all of Divi’s variables would be ignored in
header_interior.php. After some Googling, I settled on this approach:
|if( is_front_page() ):|
|include( locate_template( 'header_home.php', false, false ) );|
|include( locate_template( 'header_interior.php', false, false ) );|
To differentiate the styling between the same ID’d and classed elements, the
:not pseudo-class became my best friend. For example,
.home #et-secondary-menufor the homepage header
body:not(.home) #et-secondary-menufor the interior page header