Astra Pro includes a drag-and-drop header builder that replaces the limited single-header layout in the free version. If you have been stuck with a basic header or relying on your page builder to create a custom one, the Astra header builder is the cleaner solution. Here is how to use it properly.
Understanding the Header Builder Structure
The Astra header builder uses a grid of rows and columns. Each row has three columns — left, center, and right. You can add multiple rows: a top bar above the main header, the primary header row, and an optional bottom bar below it. Each column accepts elements you drag in from a panel.
Available elements include: Logo, Primary Menu, Secondary Menu, Button, Search, Social Icons, HTML (for custom content), WooCommerce Cart, and Account. You assign elements to columns by dragging them from the elements panel into the grid.
Setting Up a Standard Header
Go to Appearance, then Customise, then Header Builder. You will see the row grid and the elements panel. For a standard logo-left, navigation-right layout:
- Drag the Logo element into the left column of the primary header row.
- Drag the Primary Menu element into the right column.
- Click on the Logo element to configure the logo image, width, and retina version.
- Click on the Primary Menu element to set spacing, alignment, and typography.
Adding a Sticky Header
Click on the primary header row settings (the gear icon on the row itself, not on an element). Under Sticky, enable Sticky Header. You can set a different background colour for the sticky state, configure whether the logo changes on scroll, and set the sticky behaviour to start immediately or after scrolling past the hero section.
Adding a Transparent Header Over a Hero
In the same row settings, enable Transparent Header. Set the transparent background colour to transparent or a low-opacity colour. Set the logo and link colour for the transparent state separately from the default state — if your hero has a dark background, you probably need white text and a light logo version for the transparent state.
Configuring the Mobile Header
Astra header builder has a separate mobile view. Click the mobile icon at the top of the header builder to switch to the mobile layout. The mobile layout is a separate grid where you configure what appears on mobile — typically a hamburger menu toggle element and the logo. The hamburger toggle controls the mobile menu which expands as an offcanvas or dropdown.
Key mobile setting: go to the mobile menu element settings and choose between Flyout (slides in from the side) or Full Width Dropdown. Set the mobile menu background colour, link colour, and animation here.
Adding a WooCommerce Cart Icon to the Header
Drag the WooCommerce Cart element into any column in the header. Click on it to configure the icon style, whether to show item count, and the dropdown cart behaviour. This is much cleaner than using a shortcode or widget for the cart icon. Combine with the Account element if you want a login/account link alongside the cart.
Common Problems
If header changes are not appearing on the front end, clear all caches — caching plugin, CDN, and browser cache. If the transparent header shows a coloured background on some pages, check whether those pages have a featured image set that Astra is reading for the hero section detection. Disable the transparent header on a per-page basis through the Astra meta box in the page editor if needed.
Need help building a custom Astra header that does not quite fit the standard builder options? A WordPress developer can extend the Astra header with custom CSS and child theme modifications.