How to Remove the Gray Line Below Menu Bar on Divi

by Last Updated: Oct 15, 2023Blog, Divi theme

UPDATE: Since the Divi 4.0 update (that was released in October 2019), there are now much more possibilities for building custom headers with Divi. You can find out more about these new options in my other article about designing custom header for Divi.

If you ever run into any problem with the default Divi menu bar gray line and wanted to remove it, I will explain in this article how you can do it. I mean the gray line that separates the header (that contains the logo and your menu links) and the main content part of your Divi website.

 

Remove Gray Line Below Menu

 

In my case, I was working on one client’s website and we had both the header with white background and the main content section below the header with white background as well. And we didn’t like the gray line below the navigation bar, so I simply removed it.

So, if you need to remove this line, just add the following custom CSS code to your Divi Theme Options Custom CSS field:

 

#main-header { box-shadow: none !important; }

 

And if you want to remove the shadow bottom the menu bar, too, just add this code, too:

 

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

 

And that’s all for today’s quick tutorial.

Feel free to subscribe to my newsletter to be notified of more Divi quick tips like this one.

5 Free WordPress Plugins You Should Use

Banner Blue Biz Child Theme

Andrej

Author: Andrej

WordPress expert. Divi user since 2014. I blog about WordPress and Divi, my favorite WordPress theme. When I’m not working with WordPress or writing an article for this blog, I’m probably learning Italian. You can read more about me here.