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

Divi Booster

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

24 Comments

  1. hi there
    it didnt work for me using divi booster can you help me?

    Reply
    • 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
  2. Thank you worked perfectly

    Reply
  3. 2 years later … this should be a "toggle" in the Divi Theme Options.

    Reply
  4. Thank you, thank you, thank you!

    Reply
  5. Wow! Thank you so much for this! That line has been driving me crazy.

    Reply
  6. Thank you so much!! I've been going crazy trying to fix this.

    Reply
  7. Thanks for this!

    Reply
  8. Thanks Dan, you saved me time and less grey hair :)

    Reply
    • Ha ha! Happy to help, Reza :)

      Reply
  9. I am using a sidebar and the line appears again as soon as you start scrolling the page.

    Reply
    • 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
  10. This is not working in firefox ????

    Reply
    • 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
  11. Thanks! I hope they are going to fix it in DIVI 3.0.

    Reply
  12. Thank you!!!

    Reply

Submit a Comment

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