Under the Divi header you will notice a light shadow. Sometimes this looks great but in some occassions you don’t want to have this shadow.
However in the Divi settings there is no option to hide this shadow.
Fortunate it is very easy to remove or to change the shadow.
Remove the Divi header shadow
I have created 2 CSS snippets. The first one is to remove the shadow on the header when it is at the top of the page and the second one is to remove the shadow on the fixed header in case you have chosen for that option in the theme options.
To place these snippets go to Divi > Theme Options > CSS
This is the CSS snippet to remove the shadow when the header is at the top of the page.
#main-header {
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;
box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;
}And this snippet is to remove the shadow for the fixed header.
#main-header.et-fixed-header {
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;
box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;
}Change the Divi header shadow
In case you don’t want to remove the Divi header shadow but you want to increase it’s effect then you can use these snippets.
This snippet when the header is at the top of the page.
#main-header {
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;
box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;
}And this one for the fixed header.
#main-header.et-fixed-header {
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;
box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;
}You can play with the values in the snippet to make a different effect. Line 2, 3 and 4 represent for different browsers so you need to adjust each if you want to make changes.
If you want to take your Divi website to the next level then you can also make a custom header.
Checkout this guide how you can make a custom header.
