40% OFF Holiday Sale! Last Chance for Lifetime Membership! GET IT NOW

Remove the Divi Main Header Underline

Last modified Sep 10, 2020
Difficulty Beginner
Language CSS

Watch Tutorial

✅ Divi Switch

Transcript:

Hey everybody, David here from Divi Space and today I’m gonna show how to remove the underline above the header menu. Let’s get started.

As you can see by default, Divi adds this line, actually, this is a Box Shadow. And we are going to show you how to remove it!

First let’s inspect the element. Go ahead and open the Chrome browser, let’s right-click the element on the page and select inspect.

Click the main header section and you will see the code that is responsible for displaying the line. As you can see Divi adds this by default.

To remove the box-shadow we need to override this code and this is how we’re going to do that: first head on over to the theme customizer so we can have a live preview as we do this. To remove the line we just need to add this CSS code.

The code we are using in this tutorial can be found on our website, divi.space, I will put the link in the description of the video.

If you are looking for the easiest way to do this without using CSS, be sure to check out our plugin Divi Switch. Divi Switch allows you to customize the Divi theme with the click of a switch. Divi Switch allows you to customize the header, footer, main content and it allows you to add enhancements to your Divi website.

I have Divi Switch installed on this demo website, what I am going to do next is head on over to Divi theme options > click the Divi switch tab and find the right switch, click enable and save changes.

Now go to the website and refresh the page. BOOM we just removed the line with the click of the switch.

Thanks for watching the video. We’ll see you in the next tutorial.

CSS

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
#main-header {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#main-header { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
#main-header {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

___

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, September 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Next snippet Divi Contact Form: Center Submit Button
Previous snippet How To Add More Social Media Icons to Divi's Header and Footer