stable css 1.1.2 · js 1.1.0

header

Responsive header. Moves [data-on-mobile] items into overlay below 768px and restores on desktop. Manages header menus with outside-click + ESC close. Transparent-over-hero mode: data-transparent adds .is-scrolled past data-scroll-offset (default 20px) for solid-on-scroll.

Component info

Nameheader
Typecss+js
Versioncss 1.1.2 · js 1.1.0
Statusstable
CSS/assets/css/components/_ng_header.scss
JS/assets/js/ng_header.js

Classes

.ng-badge.ng-btn.ng-container.ng-content.ng-header.ng-header-brand.ng-header-center.ng-header-divider.ng-header-inner.ng-header-item-section.ng-header-left.ng-header-menu.ng-header-menu-panel.ng-header-menu-trigger.ng-header-nav.ng-header-panel.ng-header-right.ng-header-topbar.ng-header-topbar-center.ng-header-topbar-left.ng-header-topbar-right.ng-layout.ng-overlay.ng-overlay-body.ng-overlay-panel.ng-overlay-toggle

Tokens

--ng-header-active-link--ng-header-background--ng-header-border-bottom--ng-header-color--ng-header-color-brand--ng-header-gap--ng-header-hover-bg--ng-header-menu-arrow-size--ng-header-menu-bg--ng-header-menu-border--ng-header-menu-color--ng-header-menu-divider--ng-header-menu-hover-bg--ng-header-menu-item-padding-x--ng-header-menu-item-padding-y--ng-header-menu-offset--ng-header-menu-padding-y--ng-header-menu-shadow--ng-header-padding-x--ng-header-padding-y--ng-header-scrolled-bg--ng-header-topbar-bg--ng-header-topbar-color--ng-header-topbar-min-h--ng-header-topbar-pad-y