Astra fix
Astra Header Builder Not Working? Find Which Header Is Showing
An Astra site can hold four headers at once: the desktop layout, the mobile layout, a transparent version and whatever a page builder or Pro layout put on top. When the header builder seems broken, you are usually editing one while visitors see another. The repair is mostly a matter of finding which.
What you are seeing
- The Customizer shows no Header Builder panel, only older header options
- A button or menu sits in the desktop header and is absent on phones
- The hamburger opens an empty panel or the wrong menu
- New header colors show on inner pages but not on the home page
- The footer builder saves, yet the old footer still appears
Why it happens on Astra
Most common first.
- 1
You are editing one device and looking at another
The builder docked at the bottom of the Customizer holds one arrangement for desktop and another for tablet and mobile. The device icons decide which one you are editing, and an element dropped into the desktop rows is never copied across. The small-screen layout also has a part desktop lacks: the off-canvas area that the toggle button opens. Leave it empty and the hamburger opens onto nothing.
- 2
The transparent or sticky header has its own settings
Astra's Transparent Header carries its own logo, its own menu colors and its own rules for where it applies. If it is switched on for the whole site or for the home page, colors set on the Primary Header row do nothing there. Astra Pro's Sticky Header adds a third set that takes over once a visitor scrolls.
- 3
Something else replaced Astra's header
A header from Elementor Pro's Theme Builder, a header-and-footer plugin or a header layout made in Astra Pro's Site Builder prints its own markup in place of the theme's. Footers get replaced the same way. The Astra builder still opens and still saves. It is editing a header nobody is being shown.
- 4
The page itself switched the header off
Every page has an Astra Settings panel in the editor sidebar with switches that disable header rows or the footer for that page alone, plus a per-page transparent header choice. A landing page set up that way years ago explains a header that is missing on one address and fine everywhere else.
- 5
The site predates the header builder
Sites built before Astra introduced the header and footer builder keep the older header panels until someone opts in to the new one. The switch carries most settings over. Mobile layouts, and custom CSS written against the old header markup, rarely make the trip untouched.
How to fix it, in order
Least invasive first. Stop at the step that fixes it.
- 1
Back up, and export the Customizer settings
Header and footer layouts are stored inside Astra's Customizer settings. Take a full backup, and an export of those settings if you can, before moving elements around. A header rebuilt from memory never quite matches the original.
- 2
Confirm which header the page is using
Visit the affected page while logged in and click Customize in the admin bar, so the preview loads that page. Open Header Builder, then Transparent Header, and see whether it is enabled for that kind of page. Then edit the page and read its Astra Settings panel for disabled header rows.
- 3
Rule out a replacement header
Check Elementor's Theme Builder for a header or footer template, Astra Pro's Site Builder for a layout of the header type and the Plugins screen for a header-footer add-on. If one exists with display rules covering the page, that is the header to edit. The alternative is to retire it and let Astra's own header back in.
- 4
Build the mobile layout on purpose
In the header builder, click the tablet or mobile icon. Place the logo and the toggle button in the Primary Header row, then add a menu element to the off-canvas area. Open that area's settings to choose how it appears: a flyout, a full-screen panel or a dropdown. Under Appearance, Menus, Manage Locations, confirm a menu is assigned to the location the element reads.
- 5
Migrate an older header on staging
If the Customizer shows only the legacy header panels, Astra's settings offer a switch to the header and footer builder. Run it on a staging copy, rebuild the mobile layout there and retest any CSS that targeted the old header before repeating the change on the live site.
- 6
Clear caches and refresh Astra's generated CSS
If the Customizer preview is right and the public site is not, the change saved and something is serving the earlier styles. Purge the caching plugin and any CDN. With Astra Pro, check whether CSS File Generation is enabled in Astra's settings and refresh it.
Keep it from coming back
- Check every header change at phone width before closing the Customizer
- Keep one header system: Astra's builder or a builder template, never both
- Write down which pages use the transparent header and why
- Export Customizer settings before theme updates and template imports
The permanent fix
A faster Next.js build, with a CMS made for your business
A header that takes four panels and a display rule to explain usually belongs to a site assembled in layers by different people. If each header edit means checking Astra, the page builder and a Pro layout to learn who is in charge today, that cost attaches to every future change. On a Next.js build the header is one component, written for phone and desktop together, and the custom CMS exposes only what you actually change: the menu links, the phone number, the button.
| On Astra today | On Next.js with a custom CMS | |
|---|---|---|
| What you keep updated | WordPress, the theme, its builder and every bundled plugin, all in step | Nothing on a schedule. There is no theme or plugin stack to fall out of step |
| How a page is served | Built from the database on each visit, through the theme and its builder | Built ahead of time and served as finished files from servers near the visitor |
| How you edit it | A general-purpose builder with every option the theme ships | A CMS built around what your business actually changes: services, prices, photos, posts |
| What can break it | An update to any one of those parts, or a license that lapses | A change someone makes on purpose, tested before it goes live |
Your content, your addresses and your rankings come with you: every page is moved, every old address is redirected, and you get a login to an editor that only shows what you need. A repair is still the right call for many sites, and we will say so when it is.
Want this fixed on your Astra site?
Tell us what you are seeing. We look at the site, tell you plainly what is wrong and what it takes, and quote a fixed price before any work starts.
Which of these sounds like you? (pick any)
Frequently asked
On a current install it sits under Appearance, Customize, Header Builder, with the visual rows docked at the bottom of the screen. If you see only older header panels and no builder rows, the site was set up before the builder existed and never opted in. Astra offers a switch to the new builder in its settings. Try it on a staging copy first.
Because the mobile layout uses its own menu element, and that element reads its own menu location. Under Appearance, Menus, Manage Locations you may find one menu assigned to the primary location and a different or older one assigned to the off-canvas location. Assign the menu you want to both, or keep a shorter mobile menu deliberately.
Yes. A Theme Builder header replaces only the header, and Astra's footer builder keeps working beneath it. The risk is forgetting the arrangement. Write down which tool owns which part, because the Customizer will still let you edit an Astra header that no longer displays.
The preview is drawn fresh for you as a logged-in user, while visitors may receive a cached page or a generated stylesheet from before the change. Publish, purge the cache and look in a private window. If the difference persists on some pages only, look for a transparent header rule or a display condition on a replacement header.
Keep reading
- ServiceMobile Responsiveness FixesMost of your traffic is on a phone, and that is where most sites fall apart. We fix the layouts, tap targets, and overflow that cost you the sale.
- ServiceDesign & Layout FixesOverlapping text and broken spacing tell a customer you do not sweat details. We fix the glitches so the site looks as competent as the business.
- ServiceBest WordPress DesignA WordPress site that looks the part and does the work. Custom design, fast pages, and a layout built to turn visitors into customers.