The header is the primary navigation element of the tinnitus information site. It stays fixed at the top of the viewport across all pages and adapts between a horizontal desktop layout and a compact mobile layout with a full-screen overlay menu. The header provides access to the four main site sections, a search function, and a language switcher.
This component uses naluma design system tokens — Literata for the logo, Plus Jakarta Sans for navigation, burnt sienna primary palette.
BEM class: .tinnitus-header
| Property | Value |
|---|
| Height | 64px |
| Background | #FFFFFF |
| Position | sticky, top: 0 |
| z-index | 100 |
| Padding | 0 24px |
| Property | Value |
|---|
| Text | ”Naluma” |
| Font family | Literata, Georgia, serif (--primitive-font-family-heading) |
| Font size | 24px |
| Font weight | 700 |
| Color | #A55838 (--semantic-color-action-primary) |
| Property | State | Value |
|---|
| Font size | All | 16px |
| Font weight | All | 600 |
| Color | Default | #3D2E2A (--semantic-color-text-primary) |
| Color | Hover | #A55838 (--semantic-color-action-primary) |
| Underline | Default | None |
| Underline | Hover | 2px solid #A55838 |
| Items | — | “Topics”, “Research”, “About”, “Contact” |
| Nav gap | — | 28px |
| Property | Value |
|---|
| Size | 36 x 36px |
| Icon | Magnifying glass, 20px, currentColor (resolves to #3D2E2A) |
| Background | Transparent (hover: #FBFAF1, --semantic-color-surface-primary) |
| Border radius | 6px |
| Property | Value |
|---|
| Text | ”DE | EN” |
| Font size | 14px |
| Active language weight | 700 |
| Active language color | #3D2E2A (--semantic-color-text-primary) |
| Inactive color | #7A6560 (--semantic-color-text-secondary) |
| Property | Value |
|---|
| Height | 58px |
| Background | #FFFFFF |
| Padding | 0 16px |
| Layout | Hamburger (left), logo (centered), search (right) |
| Property | Value |
|---|
| Size | 36 x 36px |
| Icon | Three horizontal lines, 22px, currentColor (resolves to #3D2E2A), 2px weight |
| Background | Transparent |
| Property | Value |
|---|
| Font size | 20px |
| Alignment | Centered horizontally via absolute positioning |
When the hamburger is tapped, a full-screen white overlay slides in over the page content.
| Property | Value |
|---|
| Background | #FFFFFF |
| Position | fixed, full viewport |
| z-index | 200 |
| Property | Value |
|---|
| Height | 58px (matches mobile header) |
| Content | Logo (left), close button (right) |
| Close icon | X mark, 22px, currentColor (resolves to #3D2E2A), 2px weight |
| Property | Value |
|---|
| Font size | 18px |
| Font weight | 600 |
| Color | #3D2E2A (--semantic-color-text-primary) |
| Hover color | #A55838 (--semantic-color-action-primary) |
| Layout | Stacked vertically, full width |
| Padding | 14px 0 per link |
| Separator | 1px solid #F9DFAE (--semantic-color-border-subtle) between each link |
The language switcher appears at the bottom of the overlay, matching the desktop styling.
| Class | Element | Purpose |
|---|
.tinnitus-header | Block | Header container |
__logo | Child | ”Naluma” text link |
__nav | Child | Desktop navigation container |
__link | Child | Individual nav link |
__actions | Child | Right-side action group (search + lang) |
__icon-btn | Child | Icon button (search, hamburger, close) |
__hamburger | Modifier | Hamburger menu button (mobile) |
__lang | Child | Language switcher text |
__lang-active | Child | Currently active language |
__overlay | Child | Full-screen mobile menu overlay |
__overlay-top | Child | Overlay top bar with logo and close button |
__overlay-nav | Child | Stacked navigation links in overlay |
__overlay-link | Child | Individual link in overlay nav |
__overlay-footer | Child | Bottom section of overlay (language switcher) |
__close | Modifier | Close button in overlay |
- The header is sticky. It uses
position: sticky; top: 0 on desktop and position: fixed for the mobile overlay. Ensure subsequent content accounts for the header height (64px desktop, 58px mobile) so nothing is hidden behind it.
- Mobile overlay requires JavaScript. The hamburger button toggles the overlay visibility. Implement this with a simple class toggle (e.g.,
tinnitus-header__overlay--open) rather than inline styles, so the transition can be animated via CSS.
- Include a skip-to-content link. For accessibility, add a visually hidden “Skip to content” link as the first focusable element inside the header. It should become visible on keyboard focus and jump to the main content landmark.
- Logo always links to home. Both the desktop and mobile logo should point to the site root (
/). In the overlay, the logo remains in the top bar so users can navigate home without closing the menu.
- Language switcher is presentational for now. The DE/EN toggle does not currently trigger translation. Render it as a
<span> or <button> depending on whether client-side locale switching is wired up. When active, bold the current language.
- Search opens a separate search view. The search icon button navigates to or opens a dedicated search page/modal — it does not expand an inline search input inside the header.