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