Global Header
SCSS Location: /styles/scss/partial/_header.scss- Status: Design
- Status: Development
- Status: Documentation
Description
A universal header with primary navigation, supporting utility links, search, and language options that apply universal across the entire site..
Guidelines
Keep navigation links short. Users should be able to identify links without relying on color.
Usage
Single use included at the top of the page.
When the mobile flyout navigation is in the open state, the ancestor container with a data attribute of data-header-nav="overlay" should be given the class has-overlay to show a white transparent overlay above the page content.
Top-level primary navigation items which contain a “mega” sub navigation should be given a modifier class of primary-nav__item--mega.
In order to use the simplified and dynamic simple “mega” flyout, apply the modifier class primary-nav__item--simple and then apply the modifier class primary-nav__item--#-col, where the “#” represents the number of columns (1-4).
