Header

The modern header features sticky navigation and glass effects.

Key Features

Design Features

Sticky Navigation, Glass Effect, Gradient Background, Smooth Animations

Responsive Design

Responsive layout that works perfectly on all screen sizes

Interactions

Smooth hover effects and animations applied to all elements

Dark Mode

Perfect support for light/dark themes

Responsive Design

The header works perfectly on all screen sizes:

Screen Size	Behavior
Desktop	Full navigation display
Tablet	Compressed layout
Mobile	Switches to hamburger menu

Interactions

All header elements respond on hover:

1. Logo: Gradient and rotation effects on hover
2. Navigation Links: Background color change and movement effects
3. Theme Toggle: Rotation animation
4. Social Links: Platform-specific color changes

Code Examples

Basic Usage Customization

---
// Header component usage example
import Header from '@pelagornis/page/overrides/Header.astro';
---

<Header />

---
// Custom header configuration
import Header from '@pelagornis/page/overrides/Header.astro';

const customNavLinks = [
  { label: "Home", link: "/" },
  { label: "Docs", link: "/docs/" },
  { label: "Blog", link: "/blog/" },
];
---

<Header navLinks={customNavLinks} />

Tip: The header automatically detects the current page and displays active states.

Customization

You can change the header appearance using CSS variables:

:root {
  --header-height: 4rem;
  --header-blur: 16px;
  --header-opacity: 0.8;
  --header-bg: rgba(255, 255, 255, 0.8);
  --header-border: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --header-bg: rgba(0, 0, 0, 0.8);
  --header-border: rgba(255, 255, 255, 0.1);
}