Change the Height of the Secondary Header

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

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; 
	}
}

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;
    }
}
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.

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

4 Comments

  1. 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
    • Thanks, Mike! I've added a section on decreasing the height of the secondary header. Hope it helps!

      Reply
  2. Thank you very much!

    Reply

Submit a Comment

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