Section

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.