What if you wanted a different header color JUST for the home page?

This is the snippet you’ll need.

.home #main-header, 
.home #main-header.et-fixed-header {
	background-color: transparent;
}
.home #page-container {
	padding-top: 0 !important;
}
To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.
(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)

 

Of course, you can change the colors easily by swapping out the ‘transparent’ to something else.

Cool, I’ll just sign off with just that. Maybe I should get into dissecting the header sometime.. hmm.

Divi - transparent header only on home page To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! Start learning proper CSS for Divi

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!