Headers

The header establishes the official identity of Kaharagian government websites and provides primary navigation.

Header Structure

Government website headers consist of three main elements:

1. Government identity bar - Identifies the site as official (optional, dismissable)
2. Main header - Logo, site title, and navigation
3. Mobile menu - Navigation for smaller screens

Government Identity Bar

The identity bar appears at the very top of the page and confirms this is an official Kaharagian government website. It uses a dark background (gray-950) with white text and a gold shield icon.

Main Header

The main header uses Kaharagian Red as the background colour with white text. It includes the crown logo, site title, subtitle, and navigation.

Principality of KaharagiaOfficial Government Website

Design Specifications

Navigation

Desktop navigation appears as horizontal links at 1024px and above. Below that, navigation collapses into a mobile menu button.

Navigation link styling

• Font size: var(--text-sm)
• Font weight: var(--weight-medium)
• Padding: var(--space-2) var(--space-4)
• Hover: background rgba(255,255,255,0.15), color gold

Mobile menu button

• Background: rgba(255,255,255,0.1)
• Border: 1px solid rgba(255,255,255,0.3)
• Padding: var(--space-2) var(--space-3)
• Icon: 20x20px
• Label hidden below 480px

Accessibility

• Skip link at the very top of the page
• Navigation wrapped in <nav> with aria-label
• Mobile menu button has aria-expanded and aria-controls
• Focus states visible on all interactive elements
• Logo image has empty alt and aria-hidden="true"

HTML Structure

<header class="header">
  <!-- Government identity bar (optional) -->
  <div class="gov-bar">
    <div class="gov-bar-inner">
      <span class="gov-bar-text">
        <svg><!-- shield icon --></svg>
        An Official Website of the Principality of Kaharagia
      </span>
      <a href="#" class="gov-bar-link">Here's how you know</a>
    </div>
  </div>

  <!-- Main header -->
  <div class="header-main">
    <div class="header-inner">
      <a href="/" class="logo-link">
        <img src="/crown_white.svg" alt="" aria-hidden="true" />
        <div class="title-container">
          <span class="title">Principality of Kaharagia</span>
          <span class="subtitle">Official Government Website</span>
        </div>
      </a>

      <nav aria-label="Main navigation">
        <ul class="nav-list">
          <li><a href="/about">About Kaharagia</a></li>
          <li><a href="/government">Government</a></li>
          <!-- ... more items -->
        </ul>
      </nav>

      <button class="mobile-menu-btn" aria-expanded="false">
        <span class="menu-icon"><!-- hamburger icon --></span>
        <span class="menu-label">Menu</span>
      </button>
    </div>
  </div>
</header>