Divi is a very popular theme for WordPress and with recent updates it just keeps getting better. We’ been working with Divi a lot of late and we ran in to a situation where we needed to have the menu for a site look one way for the homepage and another for all other pages and posts. Turns out you can’t really do that with the Divi customization tools, so we came up with a solution ourselves that I wanted to share with everyone. After you’ve implemented the following steps you’ll have a menu for the homepage with a transparent background and white text with an optionally different logo while the rest of your posts and pages will use the default Divi menu and logo that you have configured.

Step 1 – Create a child theme

Strictly speaking this step is optional, but we don’t recommend editing a theme like Divi directly as any changes you make will be overwritten when you update the theme in the future. Not familiar with child themes? Learn more about child themes and read this to learn how to create a child theme. You don’t really need to do this step if you’re not doing Step 2 and you’re not planning on changing any of Divi’s theme files in the future.

Step 2 – Modify header.php to handle two different logos

Note: This step is only required if you need to use two different logos.

Open up header.php in your child theme and look around line 124. Replace this:

<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<img src=”<?php echo esc_attr( $logo ); ?>” alt=”<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>” id=”logo” />
</a>

with this:

<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<?php $upload_dir = wp_upload_dir(); ?>
<?php if ( is_front_page() ) { ?>
<img src=”<?php echo $upload_dir[‘baseurl’]; ?>/path-to-homepage-logo/logo.jpg” alt=”<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>” id=”logo” class=”home” />
<?php } else { ?>
<img src=”<?php echo $upload_dir[‘baseurl’]; ?>/path-to-subpage-logo/logo.jpg” alt=”<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>” id=”logo” class=”subs” />
<?php } ?>
</a>

Be sure to change your logo paths in the new code.

Step 3 – Customize your CSS

These changes will depend on your specific needs, but here is a generic example that A) adds transparency for the menu on the homepage, B) removes some box shadow effects, and C) changes everything in the menu to white instead of the default color used on sub-pages, D) fixes some padding issues. Add these to the custom CSS section under Divi>Theme Options:

.home #main-header, .home #main-header .nav li ul, .home .et-search-form, .home #main-header .home .et_mobile_menu { background-color: rgba(255,255,255,0); }
.home #main-header { box-shadow: none !important; -webkit-box-shadow: none !important; }
.home .et_search_form_container input, .home span.et_close_search_field:after, .home .et-fixed-header #top-menu a, .home #top-menu a, .home #et_search_icon:before { color: #fff !important; }
.home .et_pb_section { background-position:center top; padding-bottom:104px; }
.home #page-container { padding-top:0 !important; }

 

Have some questions, feedback, or code improvement suggestions? Add them in the comments!