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

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

Download Divi Booster

24 Comments

← Older Comments

Norm on March 16, 2020 at 5:15 pm

Thank you so much for this! It worked like a charm! :)
Reply
- dan on March 18, 2020 at 3:27 am
  
  Glad it helped, Norm!
  Reply
Rebecca on November 14, 2019 at 3:42 pm

Really, really helpful. Thank you so much
Reply
- dan on November 14, 2019 at 10:43 pm
  
  :)
  Reply
Alexey on September 29, 2019 at 6:32 pm

Thanks a lot. Exactly what I was looking for.
Reply
- dan on September 30, 2019 at 7:13 am
  
  You're welcome, Alexey!
  Reply
Sanjit on July 23, 2019 at 11:57 am

Thanks, it is working fine man
Reply
Caio on May 3, 2019 at 4:43 pm

Thanks man, perfect!
Reply