How to create a custom header with Astra Pro

Header sections are the top-most part of your website which generally includes your logo, navigation menus and a call-to-action (CTA). It’s one of the most important sections of any website as it lets:

1. your visitors easily navigate across several pages within your website;
2. you grab the attention of your visitors with an attractive CTA.

Therefore, getting it right is a must and this article is dedicated to provide you a step-by-step guide on how to use Astra Pro to create a custom header.

Setting up Astra Pro

1. Purchase the license: As mentioned above, this tutorial makes use of Astra Pro to create a custom header. You will therefore need to purchase an Astra Pro license.

2. Install Astra theme: On your WordPress dashboard, go to Appearance > Themes > Click “Add New“. Under “Search Themes”, type “Astra”. Hover over the block, click “Install” and then “Activate“.

3. Install Astra Pro plugin: Once you have purchased your license, under “Downloads” in your Brainstorm Force account, you should be able to download the Astra Pro Addon Plugin as a ZIP file. Get back to your Dashboard, go to Plugins > Add New > Upload and select the ZIP file that you just downloaded. Click Install & Activate.

4. Activate the license: Go to Appearance > Astra Options. Under “Activate the license“, enter the license key which can be found under “Licenses” in your Brainstorm Force account.

5. Activate the relevant modules: Astra Pro offers several options, but for the purpose of this tutorial, we will activate only those that we require to create a custom header, i.e. Colors & Background, Typography, Header Sections, & Sticky Header.

Adding the Primary Header

By default, you will have a basic header which will look something like this.

It definitely doesn’t look very appealing.

1. To customize it, go to Appearance > Customize > Layout > Header. Once you’re here, you will see several sections of the header that can be customized.
2. To add a logo, go to Site Identity > Click “Select Logo” and select the logo from your Media Library. Adjust the “Logo Width” to match your style. Untick “Display Site Title” and “Display Site Tagline” to hide the site title and the tagline from showing on your header.
3. Go a step back to select “Primary Header” where you will have more options on customizing your primary header.
4. Choose a “Header Layout” that matches your style (Left, Center or Right) and untick “Disable Menu” if you would like to show the navigation menu on your header.
5. If you would like to add a CTA on your header, select “Button” under “Last Item in Menu”. You will now see options to set the CTA. If you would like to change the styling of your button, click “Customize Button Style” > Theme Button which will give you the option to style the button to align with your branding.

You have now set up your Primary Header to include a logo, navigation menu and a CTA.

Adding a section to the header

In some instances, you might want to add another section to your header. This may include promotional banner or just a top-bar that has your basic contact details. Alternatively, you could introduce a bottom section to have a dedicated section for your navigation menu.

1. Go to Customize > Layout > Header > Above Header/Below Header – depending on your requirement.
2. Choose a layout that matches your style.
3. From the drop-down list, choose what you would like to include on your top-bar. For the purpose of this tutorial, I will choose “Text/HTML” to include some basic text.

Pro-tip: You can alternatively select “Widget” and choose an Elementor template to be shown on your top-bar. But more on that later.

Adding a sticky header

To improve user experience, most websites include a sticky header. This refers to a header menu that “sticks” at the top so that it does not disappear when the user scrolls down the page. In other words, it is accessible from anywhere on the website without having to scroll back to the top. To enable this:

1. Go to Customize > Layout > Header > Sticky Header.
2. Tick “Stick Primary Header” and you will notice that the header does not disappear as your scroll down.
3. Additionally, if you would like your Above/Below sections to stick, you can tick the boxes accordingly.

Pro-tip: Tick “Different Logo for Sticky Header?” and choose a variant of your logo. This can be really useful if you wish to have a lighter/darker background for your menu as your scroll down.

Styling the headers

To recap, up to this point, you would have included the following sections: primary header, sticky header, above/below header sections. Astra Pro provides you the option of customizing each section in terms of colors & typography.

Customizing the colors & typography of the Primary Header

To change the colors of the background and fonts in your Primary Header, go to Customize > Colors & Background > Header > Primary Header. You will have the option of changing the colors to match your styling. Change the settings under “Primary Menu” if you would like a different styling for your navigation menu.

To change the typography of the text in your Primary Header, go to Customize > Typography > Header > Primary Header. Choose the custom fonts under the “Menu” section or select “Inherit” if you would like to use the default fonts.

Customizing the Above/Below header

Customizing both, the colors and typography of the Above/Below sections is similar to customizing your Primary Header.

Customizing the Sticky Header

This option lets you customize the colors of background and text when the visitor scrolls down the page. To customize your Sticky Header, go to Customize > Colors & Background > Header > Sticky Header.

You will now have the option of customizing Sticky Header of each section (Primary, Above/Below section)