Okay, so you’ve probably seen this done on a few websites before – there’s a large hero image on a sites homepage and a transparent header/menu sits on top of it. Then, all of the sites internal pages have a ‘normal’ header/menu area with a background colour.
Here’s how to make the Divi header menu transparent
First, set up your default header/menu appearance
The first step is to set the default appearance of your Divi sites header/menu area using the built-in theme options in your WordPress admin area under ‘Appearance’ -> ‘Customise’.
Once you’re in the theme
Set the appearance of the header/menu to how you would like it to display on all of your sites internal pages, eg. any page other than the homepage.
Now, in order to achieve this effect when using the Divi theme, it’s not as difficult as you might think. Before we get started with adding any code, let’s make sure you’re using a WordPress child theme.
Are you using a child theme? You should be…
If you’re not already using a child theme for Divi, there’s a great, super simple child theme generator for Divi on the Elegant Marketplace website.
I strongly recommend using the Divi child theme generator as it’s quick, easy and also adds a greater selection of social network icons into the Divi theme options that you can use on your site.
Okay, I have a child theme, let’s code it already!
Once you have a child theme in place and activated on your website, let’s start with editing the child themes functions.php file.
You can edit the functions.php file through the WordPress admin area under ‘Appearance’ -> ‘Theme Editor’ or you can use either your web hosting file manager or
I’d recommend using your web hosting file manager or FTP rather than the WordPress theme editor as it’s easier to fix things if you make any mistakes while entering
Add the following PHP code to your child themes functions.php file:
/**
* Body Class for Transparent Header on Homepage
*/
function my_transparent_header_body_classes( $classes ) {
if ( is_front_page() ){
$classes[] = 'et_transparent_nav';
}
return $classes;
}
add_filter( 'body_class','my_transparent_header_body_classes' );
To summarise what this code does, it adds a CSS class to the sites HTML <body> tag. In this case, the class name et_transparent_nav – the Divi theme uses this CSS class to apply different CSS styles to the header/menu area.
The conditional ‘if’ statement checks if the current page is the ‘front page’ and, if it is, it adds the class name et_transparent_nav to the sites <body> tag.
Styling the transparent header/menu
The next step is to add some CSS code, either in the Divi theme options in your admin area under ‘Divi’ -> ‘Theme Options’ -> ‘Custom CSS’.
Or, if you prefer you can add this CSS code directly to your child themes style.css file using the WordPress theme editor (‘Appearance’ -> ‘Theme Editor’) or via your web hosting file manager or via FTP.
Add the following CSS code as custom CSS in the Divi theme options or directly to your child themes style.css file:
/**
* Transparent Header on Homepage
*/
.home #main-header {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
This CSS code sets the background colour of the main header area to be transparent and removes the default Divi styling of adding a box/drop shadow to the header.
It uses the class .home to ensure that this is only applied to the homepage.
That’s all folks!
I hope this helps anyone else trying to achieve the transparent header menu effect on their Divi website. I had fun figuring this out myself and writing this post. If you have any questions or feedback, please feel free to leave a comment below!
Leave a Reply