Canvas Docs

Header Types

You can choose between 7 Types of headers while creating your Pages. Simply adding the Header Type CSS class to the Header Element will activate the Header Type. The list of Header Type Classes & its descriptions are provided below for your reference:

Settings

SettingDescription
DefaultDefault Header with a White Background & Dark text.
Example: 
<header id="header">
	...
</header>
.darkHeader with a Dark Background & Light text.
Example: 
<header id="header" class="dark">
	...
</header>
.transparent-headerHeader with a Transparent Background. This header is effective for showing Sliders or other types of Hero Images on the Top with a Transparent Logo & Menu. You can add the dark class for a Light Colored Text.
Example: 
<header id="header" class="transparent-header">
	...
</header>
.semi-transparentHeader with a Semi Transparent Background. You can add the dark class for a Light Colored Text & a Dark Background.
Example: 
<header id="header" class="transparent-header semi-transparent">
	...
</header>
.floating-headerThis activates the Floating Header. You can add the dark class for a Light Colored Text & a Dark Background.
Example: 
<header id="header" class="transparent-header floating-header">
	...
</header>
.side-headerThis is a Side Header Left Aligned. Unlike the above Headers, this class should be added to the body.
Example: 
<body class="stretched side-header">
	<header id="header">
		...
	</header>

	...

</body>
.open-headerThis is a Side Header Left Aligned which is hidden by default & opens via a Trigger. Unlike the above Headers, this class should be added to the body. This class can only be used for the Side Headers. If you want to close the Side Header on scrolling, please add the .close-header-on-scroll class to the body tag.
Example: 
<body class="stretched side-header open-header">
	<header id="header">
		...
	</header>

	...

</body>
.push-wrapperThis is a Side Header Left Aligned which is hidden by default & opens via a Trigger. When the Header opens, it also pushes the wrapper to the right. Unlike the above Headers, this class should be added to the body. This class can only be used for the Side Headers. If you want to close the Side Header on scrolling, please add the .close-header-on-scroll class to the body tag.
Example: 
<body class="stretched side-header open-header push-wrapper">
	<header id="header">
		...
	</header>

	...

</body>
.side-header-rightThis is a Side Header Right Aligned. Unlike the above Headers, this class should be added to the body. You can easily add the .open-header & .push-wrapper classes to the body tag to make this Side Header follow the above behaviours.
Example: 
<body class="stretched side-header side-header-right">
	<header id="header">
		...
	</header>

	...

</body>

CSS Variables

:root,
.not-dark {
  --cnvs-header-border-color: rgba(var(--cnvs-contrast-rgb), .1);
  --cnvs-header-transparent-border-color: rgba(var(--cnvs-contrast-rgb), .1);
  --cnvs-primary-menu-color: var(--cnvs-contrast-800);
  --cnvs-primary-menu-submenu-bg: var(--cnvs-contrast-0);
  --cnvs-primary-menu-submenu-color: var(--cnvs-contrast-800);
  --cnvs-primary-menu-submenu-border: 1px solid rgba(var(--cnvs-contrast-rgb), 0.1);
  --cnvs-primary-menu-submenu-hover-bg: rgba(var(--cnvs-contrast-rgb), 0.025);
  --cnvs-header-misc-icons-color: var(--cnvs-primary-menu-color);
  --cnvs-side-panel-bg: var(--cnvs-contrast-100);
}

#header {
  --cnvs-sticky-header-height:	var(--cnvs-header-height);
  --cnvs-header-border-color:	rgba(var(--cnvs-contrast-rgb), .1);
  --cnvs-header-transparent-border-color: rgba(var(--cnvs-contrast-rgb), .1);
  --cnvs-menu-padding-x:	15px;
  --cnvs-header-floating-top-offset:	60px;
  --cnvs-side-header-padding-gutters:	30px;
  --cnvs-primary-menu-color:	var(--cnvs-contrast-800);
  --cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
  --cnvs-primary-menu-active-color:	var(--cnvs-primary-menu-hover-color);
  --cnvs-primary-menu-font:	var(--cnvs-primary-font);
  --cnvs-primary-menu-font-weight:	500;
  --cnvs-primary-menu-font-size:	1rem;
  --cnvs-primary-menu-tt:	none;
  --cnvs-primary-menu-ls:	0;
  --cnvs-primary-menu-icon-size:	1rem;
  --cnvs-primary-menu-submenu-width:	240px;
  --cnvs-primary-menu-submenu-font:	var(--cnvs-body-font);
  --cnvs-primary-menu-submenu-font-size:	0.875rem;
  --cnvs-primary-menu-submenu-font-weight:	400;
  --cnvs-primary-menu-submenu-color:	var(--cnvs-contrast-800);
  --cnvs-primary-menu-submenu-spacing:	0;
  --cnvs-primary-menu-submenu-border:	1px solid rgba(var(--cnvs-contrast-rgb), 0.1);
  --cnvs-primary-menu-submenu-hover-bg:	rgba(var(--cnvs-contrast-rgb), 0.025);
  --cnvs-primary-menu-submenu-hover-color: var(--cnvs-primary-menu-active-color);
  --cnvs-header-misc-icons-size:	1.125rem;
  --cnvs-header-misc-icons-color:	var(--cnvs-primary-menu-color);
  --cnvs-mega-menu-width-sm: 400px;
  --cnvs-page-menu-sticky-offset: var(--cnvs-header-height-shrink);
  --cnvs-mobile-menu-off-canvas-width: 280px;
}