Aurora ships with 8 header layouts. Each one has a different combination of elements (logo position, search style, CTA buttons, secondary menu, contact info). Picking the right one is one of the bigger visual decisions when setting up Aurora. This post is the comparison.
Default
Type: single horizontal bar.
Elements: logo, primary navigation, search.
Best for: blogs that want a clean, conventional header with no extras.
Mobile: logo + hamburger. Drawer includes primary menu.
Overlay
Type: two horizontal bars.
Main bar (top): social icons left, logo centered, two CTA buttons right.
Bottom bar: hamburger for secondary menu, primary navigation, search toggle. Bottom bar has a fixed light background (#f5f5f5) — the only hard-coded color in any Aurora header.
Secondary menu: small dropdown panel triggered by the bottom-bar hamburger.
Best for: blogs that want CTA buttons prominent and a secondary menu for additional links.
Mobile drawer: search field, primary menu (accordion), header buttons, social icons. No contact info. Secondary menu not in mobile drawer.
Apex
Type: two horizontal bars.
Top bar: social icons left, primary nav centered, search toggle right. Background uses topbar color setting.
Bottom bar: hamburger (secondary menu), logo centered, one CTA button right.
Secondary menu: small dropdown panel from the bottom-bar hamburger.
Search: full-screen overlay opened from top bar.
Best for: blogs with multiple navigation needs (primary + secondary) and a prominent CTA.
Mobile drawer: search field, primary menu (accordion), header buttons, social icons.
Elegant
Type: two horizontal bars.
Top bar: contact info (phone, email, address) left, social icons right. No bar background.
Main bar: logo left, pill-shaped primary navigation, search + one CTA right.
Best for: blogs that want contact details visible (services, consulting blogs) with a polished aesthetic.
Search: full-screen overlay.
Detailed
Type: dense top bar plus main header.
Elements: packs multiple elements into the upper area — contact, socials, secondary menu items. Main bar contains logo and primary nav.
Best for: content-heavy blogs that want maximum information density in the header (news-style sites, magazine-style blogs).
Thin
Type: vertical sidebar.
Elements: logo at top, vertical primary navigation, search and socials.
Body class: adds vertical-header in addition to thin-header.
Best for: editorial blogs, minimalist sites, sites where you want the content to take horizontal space without a horizontal header competing.
Mobile: reverts to horizontal hamburger header on small screens.
Upright
Type: vertical sidebar (variant of Thin).
Elements: similar to Thin with different proportions and styling.
Best for: same general use case as Thin with a different visual style.
Vanilla
Type: minimal horizontal header.
Elements: logo, hamburger that triggers a full-height slide-in menu panel (Aurora’s aurora-menu-panel).
Best for: minimalist sites where you want the header to almost disappear, with menu access tucked behind a hamburger.
Full-height slide-in: the menu panel takes the full viewport height when open. Different from the small dropdown panels in Apex and Overlay.
Choosing based on what you publish
News / magazine blogs
Detailed, Overlay, Apex. These give you space for multiple navigation paths and CTAs.
Personal essay / journal blogs
Vanilla, Thin, Upright. Minimal headers that don’t compete with the writing.
Service / consulting blogs
Elegant, Apex, Overlay. Contact information and CTAs visible.
Photography / portfolio
Vanilla, Thin, Upright. Let images take the visual weight.
Recipe / food blogs
Default or Apex. Clear category navigation, search, and recipe-friendly aesthetics.
Mobile experience by header
All Aurora headers collapse to logo + hamburger on mobile. What’s inside the drawer varies:
| Header | Mobile drawer includes |
|---|---|
| Default | Primary menu only |
| Overlay | Search, primary menu, header buttons, social icons |
| Apex | Search, primary menu, header buttons, social icons |
| Elegant | Primary menu, contact info, social icons |
| Detailed | Primary menu, contact info, social icons |
| Vanilla | Slide-in panel with full menu |
| Thin / Upright | Standard mobile drawer with primary menu |
Test on a real phone before committing.
Color customization
Every header except Overlay’s bottom bar is fully color-customizable through the Customizer’s color settings. You can match Aurora’s headers to any brand palette.
Overlay’s bottom bar is the exception — fixed at #f5f5f5 background, #272727 text. If those colors don’t fit your design, pick a different header layout.
The honest summary
Aurora’s 8 headers cover a wide range of styles. Default and Apex are reliable starts. Overlay and Elegant suit blogs with CTAs. Vanilla, Thin, and Upright are for minimalist designs. Detailed is for dense, news-style headers. Pick based on what you publish and how much content the header needs to surface. Most blogs can pick in 10 minutes by checking which one best matches their content type.
