Adding a soft drop-shadow to the Divi menu can add a really nice touch to your website, especially when you scroll down the page. It might not be a surprise that I’m doing another tutorial based on drop-shadow CSS effects as I’ve been pretty inspired by Google’s Material Design recently, and many of my other tutorials are based on using hover effects for modules and sections, such as my Divi Blurbs Module Hover Effect Tutorial.



You can see the effect in action on the header of this website.

In fact, I’ve added a drop-shadow to menus a few times before but I’ve only recently discovered how to enable the effect on the fixed-header, thanks to the Elegant Themes blog (who else?). Anyway, and rather obviously in hindsight, using the !important CSS declaration is all it required to ensure that it took authority over the original Divi stylesheet. If in doubt, add !important to it…

So here’s the CSS snippet you’ll need:

/*--------Header Drop Shadow-----*/
 #main-header {
 -webkit-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24);
 -moz-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24);
 box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24);
 }

/*--------FIXED Header Drop Shadow-----*/
 #main-header.et-fixed-header {
 -webkit-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24)!important;
 -moz-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24)!important;
 box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24)!important;
 }

You can play around with the numbers to create a different type of dropshadow, or you can use this helpful Box Shadow CSS generator if it’s easier for you!

If this has been helpful for you, please don’t forget to Subscribe to our Newsletter to get these tutorials straight to your inbox, send us a comment below, and please share!

Tim


BMC logoBuy me a coffee



 

You May Have Missed These...

The following two tabs change content below.
Founder of Inline|Creative and Digital Content Producer at IMG Artists. Freelance WordPress web designer, blogger, and musician.

Pin It on Pinterest

Share This