Change the Height of the Divi Header

Written by Dan Mossop

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

Unlock the Full Potential of Shortcodes in Divi!

Empower your Divi site with the Divi Shortcode Enabler. This plugin allows shortcodes to run effortlessly in various Divi module fields, enhancing functionality and customization across your site.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

8 Comments

  1. 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.

    Reply
    • 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!

      Reply
  2. 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?

    Reply
    • Hey Dave, I've just updated the post with the code for vertically centering the links / logo within the resized header. Hope it helps!

      Reply
  3. Thanks for this! How can I change the height of the header for just one page, instead of for the whole website?

    Reply
    • Found it myself! Adding 'min-height: 150px !important;' at Header container at the Advanced editing tab in the module.

      Reply
      • :)

        Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.