{"id":12346,"date":"2019-07-28T07:29:14","date_gmt":"2019-07-28T05:29:14","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=12346"},"modified":"2025-04-24T06:39:56","modified_gmt":"2025-04-24T04:39:56","slug":"how-to-remove-or-change-the-divi-header-shadow","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-remove-or-change-the-divi-header-shadow\/","title":{"rendered":"How to Remove or Change the Divi Header Shadow"},"content":{"rendered":"\n

Under the Divi header you will notice a light shadow. Sometimes this looks great but in some occassions you don\u2019t want to have this shadow.<\/p>\n\n\n\n

However in the Divi settings there is no option to hide this shadow.<\/p>\n\n\n\n

Fortunate it is very easy to remove or to change the shadow.<\/p>\n\n\n\n

Remove the Divi header shadow<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

To place these snippets go to Divi > Theme Options > CSS<\/p>\n\n\n\n

This is the CSS snippet to remove the shadow when the header is at the top of the page.<\/p>\n\n\n\n

#main-header {\n    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;\n    -moz-box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;\n    box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;\n}<\/code><\/pre>\n\n\n\n
And this snippet is to remove the shadow for the fixed header.<\/p>\n\n\n\n
#main-header.et-fixed-header {\n    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;\n    -moz-box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;\n    box-shadow: 0 1px 0 rgba(0,0,0,.0) !important;\n}<\/code><\/pre>\n\n\n\n
Change the Divi header shadow<\/h2>\n\n\n\n
In case you don\u2019t want to remove the Divi header shadow but you want to increase it\u2019s effect then you can use these snippets.<\/p>\n\n\n\n
This snippet when the header is at the top of the page.<\/p>\n\n\n\n
#main-header {\n    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;\n    -moz-box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;\n    box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;\n}<\/code><\/pre>\n\n\n\n
And this one for the fixed header.<\/p>\n\n\n\n
#main-header.et-fixed-header {\n    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;\n    -moz-box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;\n    box-shadow: 0 1px 0 rgba(0,0,0,.3) !important;\n}<\/code><\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
If you want to take your Divi website<\/a> to the next level then you can also make a custom header.<\/p>\n\n\n\n
Checkout this\u00a0guide<\/a>\u00a0how you can make a custom header.<\/p>\n\n\n\n
You Might Also Like\u2026<\/h3>\n\n\n\n