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.

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:

1. header.php
2. header_home.php
3. header_interior.php

The idea is to keep all of Divi’s variables in header.php and only include the structural changes in header_home.php and header_interior.php.

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.

In header_home.php and 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 header.php. WordPress’s 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_home.php and header_interior.php. After some Googling, I settled on this approach:

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-menu for the homepage header
• body:not(.home) #et-secondary-menu for the interior page header