Aurora’s headers are built with CSS Flexbox, which means you can reverse the order of any row or column using flex-direction: row-reverse or column-reverse – or reposition individual elements using the order property.
The <header> element has the ID #site-header and Aurora automatically adds a layout-specific class to it: .vanilla-header, .detailed-header, .elegant-header, and so on. The class follows the pattern {template}-header (lowercase). Use it to scope your CSS so changes only apply to the active header layout and don’t bleed if you switch later.
Header Classes by Layout
| Header Layout | Class on <header> |
|---|---|
| Vanilla | .vanilla-header |
| Detailed | .detailed-header |
| Elegant | .elegant-header |
| Apex | .apex-header |
| Overlay | .overlay-header |
| Default | .default-header |
| Upright | .upright-header |
| Thin | .thin-header |
Write Your CSS
Add this in Appearance → Customize → Additional CSS. No PHP required.
Reverse logo and navigation (single-bar headers)
On single-bar layouts like Vanilla and Default, the main bar is a flex row with the logo on the left and navigation on the right. To flip them:
.vanilla-header .main-header {
flex-direction: row-reverse;
}Swap top bar and main bar (two-bar headers)
On Detailed and Elegant headers, the two bars stack vertically inside .header-container. To put the main bar above the top bar:
.detailed-header .header-container {
flex-direction: column-reverse;
}Reorder individual elements with order
For finer control, use the order property on specific child elements. Lower numbers appear first. All flex children default to order: 0.
Move the search icon before the navigation:
.vanilla-header .main-header .search-icon {
order: -1;
}Move CTA buttons to the far left:
.vanilla-header .main-header .header-cta {
order: -2;
}Finding the Right Child Selectors
Use your browser’s inspector (right-click → Inspect) on the header elements to find exact class names. They can vary between layouts. Common ones across most headers:
.logo-container– the logo wrapper.main-header– the primary header bar.topbar– the secondary top bar (Detailed, Elegant).header-navigation– primary nav wrapper.header-socials– social icons.header-contacts– contact info
Notes
- These overrides apply to desktop only. The mobile drawer uses
.aurora-mobileand is unaffected by changes to.main-headerflex direction. - If you switch to a different header layout in the Customizer, update the header class prefix in your CSS to match the new layout’s class from the table above.
- All CSS goes in Appearance → Customize → Additional CSS. No PHP or theme file edits needed.
If you prefer to keep these overrides out of Additional CSS and in a dedicated stylesheet instead, consider using a child theme – your styles will survive Aurora updates without any extra maintenance.