Application Header

Full navigation header with proper logo placement, menu structure, and responsive design.

Complex 3 Critical Rules Demonstrated

Critical Rules Demonstrated

Live Example - Light Background

Live Example - Dark Background (Reversed Logo)

Brand Rules Applied

LOGO-001: Logo is LEFT-aligned in the header, never centered
LOGO-002: No drop shadows, gradients, or filters applied to the logo
LOGO-003: Dark header uses the reversed (white) logo for proper contrast

Code

<header class="app-header">
  <!-- LOGO-001: Logo is left-aligned -->
  <a href="/" class="header-logo">
    <!-- LOGO-003: Use reversed logo on dark backgrounds -->
    <img src="/logos/Alterspective_Logo_reversed_FA.png" alt="Alterspective" />
  </a>

  <nav class="header-nav">
    <a href="#">Dashboard</a>
    <a href="#">Projects</a>
  </nav>
</header>