Change the Height of the Secondary Header

Increase the Height of the Secondary Header

You can increase the height of the Divi Theme's secondary menu bar using the following CSS:

@media only screen and (min-width: 981px) {
	#top-header { 
		padding-top: 30px; 
		padding-bottom: 30px; 
	}
}

Related Post: Adding CSS to the Divi Theme

This adds 30px of additional padding (and hence height) to the top and bottom of the secondary header. Note that the code applies on desktops only, to avoid showing the secondary header on mobiles when it has no content (as can happen in some cases).

Decrease the Height of the Secondary Header

The CSS code for reducing the secondary header height is slightly more complex than that for increasing it:

#et-info, 
#et-secondary-menu > ul > li a { 
    padding-bottom: 0.5em; 
}
@media only screen and (min-width: 981px) {
    #top-header > .container {
        padding-top: 0.5em !important;
    }
}
@media only screen and (max-width: 980px) {
    #et-info {
        padding-top: 0.5em;
    }
}

Related Post: Adding CSS to the Divi Theme

The default top and bottom padding is 0.75em. The above code reduces this to 0.5em, on both desktop and mobile. If you want a different top / bottom padding amount (and hence height), change each instance of 0.5em with your desired padding amount.

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

4 Comments

Mike Simpson on August 27, 2020 at 3:23 pm

Excellent Dan. And how to decrease the height of the secondary header?

Thank you! you have one of the very best Divi sites out there!
Reply
- dan on August 28, 2020 at 7:12 pm
  
  Thanks, Mike! I've added a section on decreasing the height of the secondary header. Hope it helps!
  Reply
Me on November 21, 2019 at 8:22 pm

Thank you very much!
Reply
Steven Carr on July 3, 2019 at 9:45 pm

Love it!
Reply