Header Sizes

Easily modify Header Heights without the need of Customizations.

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.

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

Last Modified: April 12, 2023