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);
}