Header Sizes

Easily modify Header Heights without the need of Customizations.

Code Example

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

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.

    :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: March 10, 2023