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:, #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; 


  1. Thank you so much for this! It worked like a charm! :)

    • Glad it helped, Norm!

  2. Really, really helpful. Thank you so much

    • :)

  3. Thanks a lot. Exactly what I was looking for.

    • You're welcome, Alexey!

  4. Thanks, it is working fine man

  5. Thanks man, perfect!


Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.