Remove the Divi Main Header Underline

 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.