No results found. Try again with different words?

Search must be at least 3 characters.

How To Create a Header With Astra Header Builder?

Astra Header Footer Builder is the new and advanced way to design a creative header/footer in Astra.

The Header Footer Builder feature has been released in Astra 3.0.0 version.

This article will help get you started and to understand all available options with Astra Header Footer Builder.

Before starting you can read FAQs about Header Footer Builder here.

Getting Started

Once you have the Astra theme (4.0.0 version and above) installed go to Astra welcome page by clicking on Astra from the WordPress dashboard. Here you can see the Header Builder option under Quick Settings.

Astra Header Builder

Click on the button to start designing with New Header/Footer Builder.

Then visit the Customizer by clicking on “Go to Customizer”. Once you are in the customizer you will see new options for Header Builder and Footer Builder.

astra Header and Footer Builders

Editing Header

Header Builder contains –

  • Visual Header Builder – with an above header, primary header, and below header.
  • General tab
  • Design Tab

You can add and manage header elements with Visual Builder and customize them from the General and Design tab.

Astra header builder

Visual Header Builder

Visual Header Builder is a flexible and advanced header builder. Changes you do in the visual builder will instantly reflect on your header design. 

  • It gives you 3 rows to build a unique header structure – Above, Primary, and Below;
  • You can click on the plus sign to add different header elements – Button, HTML, Widgets, Social, Primary Menu, Secondary Menu;
  • You can drag and drop elements to different sections to place them in the required position. 

Note:

Site Identity section can now be found under the Customizer > Header Builder > General > Site Indentity & Logo

Configure styling for above, primary, and below header

Click on the setting icon on the left side of each header section and it will take you directly to styling options. 

Astra above header customizing

General Tab

Elements you add in the visual header builder will be available under the General tab. You can click on the individual element and edit the settings.

Design Tab

This will give you design options for header width and spacing.

Header Types

You will observe one more tab under the General tab i.e. Header Types This will give you options to configure different header types. 

With the Astra theme, you can enable the Transparent Header and configure it. 

With Astra Pro, you can have options for Sticky Header

Note:

We also have other elements available like WooCommerce Cart, EDD Cart in our Header Builder. For the same, you might require some other plugins that need to be added.

You can find the complete list here.

Astra Header Types

Note:

The Sticky Header is the Astra Pro feature, so this option is only available when Astra Pro Addon is active.

Design Mobile Header

With Astra Header Builder you can design a header look on responsive devices.

Read the article here to know more.

Header Builder Elements with Astra theme and Astra Pro 

Astra theme offers an entire structure for a new header builder. While you can unlock advanced features with Astra Pro.

Here is a list of header elements that are available with the Astra theme and Astra Pro  

With Astra 

  • Button
  • HTML 1
  • HTML 2
  • Logo
  • Primary Menu
  • Secondary Menu
  • Search
  • Social
  • Widget 1
  • Widget 2

With Astra Pro 

Note: You can extend the number of elements further in Astra Pro. Read more.

  • Button 1
  • Button 2
  • HTML 1
  • HTML 2
  • Logo
  • Primary menu
  • Secondary Menu
  • Search
  • Widget 1
  • Widget 2
  • Widget 3
  • Widget 4
Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form