Remove the Divi Main Header Underline

Last modified Oct 11, 2019
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.

___

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.

CSS

#main-header {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

Your Comments

Submit a Comment

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

Receive notifications about our new blog posts.

Before You Start

Build a Child Theme

Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!

Generate Child Theme

How to Add Java Script and jQuery to Divi

There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.

Read More

How to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.

Read More