Are you looking to enhance the visual depth of your DIVI website's header? A simple CSS tweak can add an elegant drop shadow, giving your header a raised, dynamic look. Follow this guide for a quick and effective CSS snippet to apply a drop shadow to your DIVI header.

#main-header {

    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);

}{codeBox}


Breaking Down the Code:


#main-header: Targets the main header element in your DIVI theme for customization.

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);

box-shadow: This CSS property adds a shadow effect to the element. The values represent the shadow's horizontal offset, vertical offset, blur radius, spread radius, and color, respectively.

rgba(0,0,0,0.2): This represents the color and opacity of the shadow. The "rgba" function uses red, green, blue, and alpha (opacity) values.


Implementation Steps:


Accessing the DIVI Theme Options: Navigate to "Divi" in your WordPress dashboard and click on "Theme Options."

Accessing the Custom CSS Box: In the "General" tab, locate the "Custom CSS" box.

Adding the Code: Paste the above CSS code snippet into the "Custom CSS" box.

Save Changes: Don't forget to click "Save Changes" to apply your new header style.
Result:

Your DIVI header will now have a subtle yet impactful drop shadow, creating a sense of depth and sophistication. This simple addition can significantly enhance the overall look and feel of your site.

With this easy CSS modification, you can elevate your website's aesthetic and leave a memorable impression on your visitors. Have fun experimenting and customizing your website's design!