Search/

Primary header

Last modified:

The main header of a page.

Header test files

Two test files are provided to properly test the fixed positioning and z-index:

Design

Last modified:

Header container positioning

The container is set to position: fixed and has a z-index of overlay.

This means the next container element that follows after the <header> must receive an offset commensurate in height (at all breakpoints) to ensure that page content is not obscured by the header.

.bc-header handles this by pushing the <main> element down (via a general CSS sibling selector).

When the AVM banner spawns the height of the header increases. To account for this a variant class (.bc-header--avm-active) is provided. Apply this class on AVM spawn to the <header>. This increases the offset for <main> commensurate to the additional height the AVM banner adds to the header.

Rationale

Last modified:

The header container holds the Navbar and AVM banner alerts when they spawn.

See also

Last modified: