Removing the Divi Header Bottom Border

The Divi Theme header area is separated from the content by a thin grey line at the bottom of the header. The "border" at the bottom of the header bar is not actually a border, but a thin shadow. If you'd like to remove this, here's how:

Remove the Header Bottom Border using Divi Booster

Divi Booster has an option to hide the Divi Header bottom border. You'll find it on the settings page at:

Divi > Divi Booster Header > Main Header > Hide header bottom border

Remove the Header Bottom Border using CSS

To manually remove the header bottom shadow line from the header bar, you can use the following CSS:

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

Compatibility Notes

Both the Divi Booster and manual CSS methods above may be overridden by Divi Toolbox by Divi Lover. I haven't yet tracked down the setting in Divi Toolbox that causes this, but if you need to, you can override Divi Toolbox's own header box shadow using this CSS:

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

This post may contain referral links which may earn a commission for this site

More Divi Tips

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

Download Divi Booster

24 Comments

Newer Comments →

Eduardo Alfaro on April 9, 2019 at 11:03 am

hi there
it didnt work for me using divi booster can you help me?
Reply
- dan on April 9, 2019 at 6:49 pm
  
  Hi Eduardo, I just checked and the code still works in recent versions of Divi. I'd first try clearing any caches on your site and then clearing your browser cache. If that doesn't help, are you able to send me a link to the site you're working on so that I can take a look? Thanks!
  Reply
Wes on February 23, 2019 at 2:03 am

Thank you worked perfectly
Reply
Josiah on May 10, 2018 at 1:11 pm

2 years later … this should be a "toggle" in the Divi Theme Options.
Reply
Martin on February 28, 2018 at 9:52 am

Thank you, thank you, thank you!
Reply
Lee on February 25, 2018 at 11:13 am

Wow! Thank you so much for this! That line has been driving me crazy.
Reply
Manisha on February 2, 2018 at 3:26 pm

Thank you so much!! I've been going crazy trying to fix this.
Reply
Kelly on January 25, 2018 at 8:32 am

Thanks for this!
Reply
Reza on December 7, 2017 at 10:13 pm

Thanks Dan, you saved me time and less grey hair :)
Reply
- dan on December 7, 2017 at 10:38 pm
  
  Ha ha! Happy to help, Reza :)
  Reply
John on December 7, 2017 at 7:57 am

I am using a sidebar and the line appears again as soon as you start scrolling the page.
Reply
- dan on December 8, 2017 at 4:42 am
  
  Hi John, I've just updated the code in the post such that it should also remove the header bottom border on the "fixed" header that is displayed when you start scrolling the page. I hope that helps!
  Reply
lois on October 3, 2017 at 2:16 pm

This is not working in firefox ????
Reply
- dan on October 3, 2017 at 11:36 pm
  
  Hey lois, hmm… it's working for me in firefox! Any chance you can send me a link to the site you're working on so that I can take a look?
  Reply
Frederic on July 28, 2016 at 12:26 pm

Thanks! I hope they are going to fix it in DIVI 3.0.
Reply
David on March 5, 2016 at 1:50 pm

Thank you!!!
Reply