Header Heights

Code Example

<header id="header" class="full-header header-size-sm">
	...
</header>

Ways to Modify Header Heights

• Default Header Sizes

  Control your Header Heights using the following predefined Header Sizes:

  • .header-size-sm – For a Header Size of 60px
  • .header-size-md – For a Header Size of 80px
  • .header-size-lg – For a Header Size of 120px

  You will need to add these Classes on the #header Tag.

• Custom CSS

  Use this CSS Code in the css/custom.css File to modify the Header Size.

  Copy

  /* Custom Header Size
  -----------------------------------------------------------------*/
  .header-size-custom #logo img {
  	height: 70px;
  }
  
  @media (min-width: 992px) {
  
  	.header-size-custom .header-wrap-clone {
  		height: calc( 70px + 1px );
  	}
  
  	#header.header-size-custom + .include-header {
  		margin-top: calc( -70px - 2px );
  	}
  
  	.header-size-custom.sticky-header-shrink #header-wrap #logo img {
  		height: 70px;
  	}
  
  	.header-size-custom .menu-container > .menu-item > .menu-link {
  		padding-top: 24px; /* (70px - 22px)/2 */
  		padding-bottom: 24px; /* (70px - 22px)/2 */
  	}
  
  	.header-size-custom.sticky-header-shrink .menu-container > .menu-item > .menu-link {
  		padding-top: 24px; /* (70px - 22px)/2 */
  		padding-bottom: 24px; /* (70px - 22px)/2 */
  	}
  
  }

  Then add the .header-size-custom Class to the #header DIV.

• Using Javascript

  This is the most flexible way to modify Header Sizes. Simply use the following attributes on the #header Tag:

  • data-logo-height – Set a Default Logo Height
  • data-menu-padding – Set a Default Menu Padding. The Menu Items Line Height is 22px. So, if you want the Header Height to be 100px, then use the value 39. Breakdown: 39px (Top Padding) + 39px (Bottom Padding) + 22px (Line Height) = 100px.
  • data-sticky-logo-height – Set the Logo Height for Sticky Headers
  • data-sticky-menu-padding – Set the Menu Padding for Sticky Headers
  • data-mobile-logo-height – Set the Logo Height for Mobile Devices (under 992px)
  Note:

  As the Height is controlled using Javascript, there will be a Noticeable Jump in the Header and the following content while the Page is Loading. You can consider using Page Transitions to Hide the Content until the Page loads completely to hide this behavior.

  Note:

  Javascript Header Heights will not work if .header-size-* Class is used on the #header Element.