To change the height of the Divi Theme header, you can do so by adding CSS to Divi, like so:
@media only screen and ( min-width:981px ) {
#main-header { min-height: 150px !important; } /* normal */
#main-header.et-fixed-header { min-height: 250px !important; } /* shrunken header */
}A couple of notes:
- This sets the minimum height rather than the absolute height to allow the header to grow if you add more content too it.
- The first min-height sets the initial height of the header, while the second sets the height of the header when it is in the "shrunken" state it enters when the user scrolls down.
- The code above applies the header height settings only on wide displays, so that on mobiles the usual Divi header height will be used.
Centering the Logo / Links in the Re-sized Header
If you'd like to center the logo / links within the header, you can use the following CSS. To get them correctly centered, you need to set the two margin values to half of the height value set by the earlier code.
@media only screen and ( min-width:981px ) {
/* normal header */
#main-header .et_menu_container {
transform: translateY(-50%);
margin-top: 75px !important;
}
/* fixed "shrunken" header */
#main-header.et-fixed-header .et_menu_container {
transform: translateY(-50%);
margin-top: 125px !important;
}
}
Hello!
this worked but my logo is too small. How can I make it bigger? I need the logo bigger so users can read what it says.
Hi marcela, there's a Divi feature for adjusting the logo height (as a percentage of the header height), which you'll find at "Divi > Theme Customizer > Header & Navigation > Primary Menu Bar > Logo Max Height".
This option doesn't play particularly nicely with the code above, but fortunately there's now also a feature for setting the "Menu Height" in Divi (I wrote this post before it existed). The Divi feature is found just above the "Logo Max Height" option and will work properly with the logo height setting.
I'd suggest removing the code above, and setting both the menu height and logo max height in Divi instead. Note that it sets a limit on the height of logo (shrinking larger logos to fit), but won't expand smaller logos to fit. If you're logo is too small to fill the max height set, either upload a larger logo, or use CSS to set a min height on the logo, for example:
#logo { min-height: 80%; }It probably makes sense in most cases to set the min-height to the same value as the logo max height in the Divi option. Also note that the resolution of your logo will be better if you just upload a larger version rather than applying a min-height.
Hope that helps, but let me know if anything isn't clear. Thanks!
Works great, thanks for this …. Question though, the writting is not central, its moved to the top so a large gap under it. Any CSS to fix this please?
Hey Dave, I've just updated the post with the code for vertically centering the links / logo within the resized header. Hope it helps!
Thanks for this! How can I change the height of the header for just one page, instead of for the whole website?
Found it myself! Adding 'min-height: 150px !important;' at Header container at the Advanced editing tab in the module.
🙂
Brilliant !!! Thanks for Sharing