Canvas Docs

Header Sizes

Header Sizes

Canvas provides preset header heights plus a fully custom option. Height is controlled by the --cnvs-header-height CSS variable, which the size classes remap to preset values. All sizes only take effect on the expanded (desktop) menu layout, under body.is-expanded-menu.

Size Classes

Class Height Notes
(none / full-header) 100px Default header height.
header-size-sm 60px Small / compact header.
header-size-md 80px Medium header.
header-size-custom your value Set your own --cnvs-header-height.

These map to the SCSS $header-sizes map and height variables:

$header-sizes: (
	sm : 60px,
	md : 80px,
	lg : 120px,
);

$header-height        : 100px;
$header-height-sm     : 60px;
$header-height-md     : 80px;
$header-height-lg     : 120px;
$header-height-shrink : 60px;

The size class simply reassigns the height variable:

.is-expanded-menu .header-size-sm {
	--cnvs-header-height: var(--cnvs-header-height-sm);
}

Small Header

<header id="header" class="header-size-sm border-0" data-sticky-shrink="false">

Since the small header is already compact, disabling shrink with data-sticky-shrink="false" keeps it from getting even smaller when sticky.

Medium Header

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

Custom Header Height

Use header-size-custom and set the variable inline (or in your stylesheet):

<header id="header" class="border-bottom header-size-custom"
        data-sticky-shrink="false"
        style="--cnvs-header-height: 140px;">
.header-size-custom {
	--cnvs-header-height: 140px;
}

Header Height Variable Reference

Variable Default
--cnvs-header-height 100px
--cnvs-header-height-sm 60px
--cnvs-header-height-md 80px
--cnvs-header-height-lg 120px
--cnvs-header-height-shrink 60px

Notes and Tips

  • Size classes affect only the desktop (expanded) menu; the mobile header uses its own compact height.
  • The header clone (.header-wrap-clone) auto-matches the height + 1px, so switching sizes never causes layout jumps.
  • Pair a taller custom header with data-sticky-logo-height and data-sticky-menu-padding to control how it compacts when sticky.
  • To shrink to a specific height on scroll, override --cnvs-header-height-shrink.

Usage

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

Ways to Modify Header Heights

  1. 1

    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.

  2. 2

    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;
}
Was this page helpful?