Header Types

Canvas ships a single, flexible header component driven entirely by classes on the <header id="header"> element. By combining a base type class with modifiers you get solid, transparent, floating, dark, and semi-transparent headers. The header is Bootstrap 5 based, so all standard grid and utility classes work inside it.

Base Structure

Every header follows the same skeleton: an outer #header, an inner #header-wrap, a Bootstrap .container, and a .header-row flex row that holds the logo, menu, and misc icons.

<header id="header" class="full-header">
	<div id="header-wrap">
		<div class="container">
			<div class="header-row">

				<!-- Logo -->
				<div id="logo">
					<a href="index.html">
						<img class="logo-default" srcset="images/logo.png, images/logo@2x.png 2x" src="images/logo@2x.png" alt="Canvas Logo">
						<img class="logo-dark" srcset="images/logo-dark.png, images/logo-dark@2x.png 2x" src="images/logo-dark@2x.png" alt="Canvas Logo">
					</a>
				</div><!-- #logo end -->

				<!-- Primary Menu, header-misc, etc. -->

			</div>
		</div>
	</div>
</header>

Header Type Classes

Class	Effect
`full-header`	The default type. The header spans the full container width with a bottom border.
`transparent-header`	Header background becomes transparent, ideal over a slider or hero image. Sets `--cnvs-header-bg: transparent`.
`floating-header`	Detaches the header so it floats over content with a top offset and padded container.
`semi-transparent`	Used with `transparent-header`. Applies a translucent background (`rgba(...,.7)`) instead of full transparency.
`dark`	Switches the header to the dark colour scheme (light text on dark background).
`not-dark`	Forces the light scheme. Commonly applied when the header becomes sticky over dark heroes.
`no-sticky`	Disables sticky behaviour on scroll.

Solid (Default) Header

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

Transparent Header

Use over a full-screen slider or hero. Pair with dark for light text, and add data-sticky-class="not-dark" so it flips to a solid light header once sticky.

<header id="header" class="transparent-header dark" data-sticky-class="not-dark">

Floating Header

<header id="header" class="transparent-header floating-header">

The floating header reads its spacing from CSS variables:

#header.floating-header {
	margin-top: var(--cnvs-header-floating-top-offset);
}
#header.floating-header .container {
	padding: 0 var(--cnvs-header-floating-padding);
	background-color: var(--cnvs-header-floating-bg);
}

Semi-Transparent Header

<header id="header" class="full-header transparent-header semi-transparent">

#header.transparent-header.semi-transparent {
	--cnvs-header-bg: rgba(var(--cnvs-invert-contrast-rgb), .7);
}

Dark Header

<header id="header" class="full-header dark">

Notes and Tips

Type classes are additive: transparent-header + floating-header + dark all combine.
Override the header background colour anywhere with the --cnvs-header-bg custom property.
For a transparent header sitting over content, add .include-header to the element that should slide up under it. The header JS sets a negative margin-top so the hero appears behind the header.
Do not confuse transparent-header (over-content style) with no-sticky (behaviour). They are independent.

Settings

Setting	Description
`Default`	Default Header with a White Background & Dark text. Example: `<header id="header"> ... </header>`
`.dark`	Header with a Dark Background & Light text. Example: `<header id="header" class="dark"> ... </header>`
`.transparent-header`	Header 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-transparent`	Header 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-header`	This 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-header`	This 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-header`	This 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-wrapper`	This 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-right`	This 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;
}

Was this page helpful?