Global Navigation

The Global Navigation component has various modifier classes: --has-nav-exposed --open --stuck --solid-when-stuck --search-open

It also responds to two classes placed higher up in the DOM: has-breadcrumb-solid has-nav-solid

These classes are applied to the main nav container or body element to invoke the proper state. The Styleguide side menu must be closed to view the proper responsive behavior.

More documentation on this revised navigation component is here

There is also a secondary level of navigation contained in a drawer, that is hidden by default and animated in when activated by clicking on the 'Series' link. Any such drawers are wrapped in '_flyout_container', and the inner content for each context is documented as components like Series Drawer.

Transparent nav with exposed menu (sho.com home page), solid with stuck

Transparent nav with menu and breadcrumb (inner pages)