Header Sizes

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.

  Note:

  These Sizes will be applicable only on Expanded Menus and not on Mobile Menus. To set the Header Sizes for Mobile Menus as well, simply use the CSS Variable directly on the #header Tag. Example: --cnvs-header-height: 60px;. This will reset the Header Size on both Expanded and Mobile Menus.

• Custom CSS

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

  Copy

  :root {
  	--cnvs-header-height: 100px;
  	--cnvs-header-height-sm: 60px;
  	--cnvs-header-height-md: 80px;
  	--cnvs-header-height-lg: 120px;
  	--cnvs-header-height-shrink: 60px;
  	--cnvs-side-header-width: 260px;
  }