How To Customize The Header On Astra

How To Customize The Header On Astra

In my post, I show you how to customize the Header on the Astra WordPress theme step by step.

Astra is a light and fast WordPress theme. It is highly customizable and is one of the most downloaded WordPress themes.


Let us begin.

To start, select Header Builder from the customizer menu.

Header Builder

On the next page, you can customize the Elements and the Design.

Header builder elements

You can edit using the customizer’s tabs or within the preview screen.

Preview screen

The three sections are at the top of your website. Currently, I use one area.

That section has my logo on the left. My menu and call to action button are on the right.

Here is my website.

Live preview

Site Title And Logo

The first option is the Site Title & Logo.

Site title and logo

The Site Title & Logo option allows you to upload your logo and set a title to appear on the header section of your website.


Upload your logo. You have an option to upload a logo for retina devices.

website logo

Next, set the width of your logo.

Logo width

Next, add a site title and tagline to your header.

Site title

Your site tile appears next to your logo.

Site title

Disable the title and tagline options to only have a logo on your header.

Finally, click Site Icon to add a favicon to your website.

Site icon

Visit my How To Change The Favicon On Astra for a complete tutorial.


Click the Design tab to add spacing.

Enter a number to determine how far you want your logo from the edge of your website.



Use the Button option to add a call to action to your header.


On my website, the Button appears on the right. Add button text, the destination URL, and the link relationship.

The most common relationship tags are Follow and Nofollow.

Button general

On my website, the Button appears on the right.

Take action


Use the Design tab to customize the look of the Button.

Design tab

Primary Menu

Primary Menu allows you to customize the look of your navigation menu.

Primary Menu


Click Configure Menu From Here to customize your current menu.

You can use this link to create a new menu or select another as your main menu.

Edit Width to change the default setting.

Configure menu

On my website, the menu appears on the right next to the button.



Use the Design tab to customize the look of the Menu.


Transparent Header

On my website, I’m using a transparent image.

Transparent header


You can choose to enable the transparent header on selected devices.

You can upload an image and edit the width.

Transparent header


Use design to customize your Transparent Header.

Add Items To The Header Builder

Click on the Header Builder sections to add blocks.

Add blocks

Select the block you want to add.

Select block

How To Customize Header On Astra Video Tutorial

Astra is one of the most downloaded themes on WordPress. It is fast and easy to customize.

The Astra WordPress theme has excellent customization options to help you create a beautiful website.

Breadcrumbs allow visitors to link back to previous pages on your website. Visit my How To Customize Breadcrumbs On Astra article to learn more.

I hope you found my article informative. If you have questions, please leave them below.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.