Header Footer Patterns

Header Patterns

Marketing Site

• Logo (left) + Nav items (center or right) + CTA button (right).
• Transparent on hero, solid on scroll.
• Height: 64-80px.
• Hamburger on mobile (< 768px).

Web App

• Logo + Breadcrumb/page title (left) + Search (center) + Actions + User menu (right).
• Always solid background. Fixed/sticky on scroll.
• Height: 48-64px.

Sticky Header

• Reduce height on scroll (80px → 56px).
• Hide on scroll down, show on scroll up (smart hide).
• Never sticky on mobile for content-reading pages.