To change the height of the Divi Theme header, you can do so by adding CSS to Divi, like so:
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.
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