How to Remove Divi Menu Drop Shadow

by | Jul 10, 2019 | Divi Tutorial | 2 comments

In this tutorial, I’ll show you How to Remove the Divi Menu Drop Shadow. Out of the box, the Divi menu has a little line below the menu and expands to a full drop shadow when you scroll down (if you have fixed navigation set.) It’s usually unseen against a dark background or if you have a dark menu color but there are many occasions where it’d be nice to remove it but unfortunately it can’t be removed with any basic Divi theme settings. 

Luckily, with just a little CSS magic, it’s easy peezy! It’s a handy trick to be able to remove the Divi menu drop shadow when you have a light menu, it’s against a light background or particularly if you have a transparent menu.

Here’s the CSS I showed in the video:

Just add this to your theme customizer CSS area or ideally your child theme stylesheet. And remember, we merged the main header AND fixed header so this few lines of code will take care of it all for ya.

#main-header, #main-header.et-fixed-header {
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
    box-shadow: none!important;
}

Like this tutorial? You’ll love my CSS Course.

Use coupon code “CSS30” for $30 OFF at checkout!