Aurora ships with 8 header layouts. Each one has a different combination of elements: logo position, search style, CTA buttons, secondary menu, and contact info. Picking the right one is one of the bigger visual decisions when setting up the Aurora theme. 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. The 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. The secondary menu doesn’t appear in the mobile drawer.
Apex
Type: two horizontal bars.
Top bar: social icons left, primary nav centered, search toggle right. Background uses the 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 the top bar.
Best for: blogs with multiple navigation needs (primary and 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, like services or consulting blogs, paired with a more polished aesthetic.
Search: full-screen overlay.
Detailed
Type: dense top bar plus main header.
Elements: packs multiple elements into the upper area, including contact info, socials, and secondary menu items. The main bar contains the logo and primary nav.
Best for: content-heavy blogs that want maximum information density in the header, such as news-style sites or 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, and sites where you want the content to take up horizontal space without a horizontal header competing for it.
Mobile: reverts to a horizontal hamburger header on small screens.
Upright
Type: vertical sidebar (variant of Thin).
Elements: similar to Thin, with different proportions and styling.
Best for: the same general use case as Thin, just 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 up the full viewport height when open, which is different from the small dropdown panels used in Apex and Overlay.
Choosing based on what you publish
News / magazine blogs
Detailed, Overlay, or Apex. These give you space for multiple navigation paths and CTAs at once.
Personal essay / journal blogs
Vanilla, Thin, or Upright. Minimal headers that don’t compete with the writing for attention.
Service / consulting blogs
Elegant, Apex, or Overlay. Contact information and CTAs stay visible without extra clicks.
Photography / portfolio
Vanilla, Thin, or Upright. These let the images carry the visual weight instead of the header.
Recipe / food blogs
Default or Apex. Clear category navigation, visible search, and a layout that stays out of the recipe content’s way.
Mobile experience by header
All Aurora headers collapse to a logo and hamburger on mobile, but what’s inside the drawer varies quite a bit by layout:
| 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 |
Since mobile traffic makes up the majority of visits for most blogs, and Google evaluates your site mobile-first when indexing it, it’s worth testing on a real phone before you commit to a layout rather than trusting how it looks in a browser’s simulated view. If you’re still building out your menu structure, our guide on building WordPress navigation that actually works is a useful companion piece before you lock in a header layout.
Color customization
Every header except Overlay’s bottom bar is fully color-customizable through the Customizer’s color settings, so you can match Aurora’s headers to almost any brand palette without touching code.
Overlay’s bottom bar is the one exception, fixed at a #f5f5f5 background with #272727 text. If those specific colors don’t fit your design, it’s simpler to pick a different header layout than to try to override the fixed styling.
For the complete list of what each header layout supports, including which elements are configurable and which aren’t, see Aurora’s header features documentation. And if you’re setting up Aurora from scratch, our complete setup walkthrough covers where the header decision fits into the bigger picture.
Making the final call
Aurora’s 8 headers cover a wide range of styles. Default and Apex are reliable starting points for most blogs. Overlay and Elegant suit blogs that lean on CTAs. Vanilla, Thin, and Upright work well for minimalist designs, and Detailed is built for dense, news-style headers. Pick based on what you publish and how much content the header genuinely needs to surface, not just which one looks best in a screenshot. Most people can make this decision in about 10 minutes by checking which layout best matches their content type.
