How to Create a Top Header and Below Header using Astra

In this article, i’ll show you how to create a top header and below header using Astra. The above header and below headers are sections that lay at the top or below of your main header on a website. The Astra theme enables you to do just that and I am going to show your every step on how to set that up. 

To do this you will need to get the Astra Pro addon that will enable you to create the top and below headers.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Creating a Top Header and Below Header using Astra Theme

Add a Top Header to your Website

After you get your Astra Pro plugin installed, go to Appearance > Customize, under the Header option, here you’ll find the Above Header and Below Header options (01:21)

Top Header and Below Header using Astra

Go to Above Header, under Layout you can choose either Layout 1 or 2, or you can just disable the option (01:51). 

Under Layout 1;

You can add text or a widget to your header and you can add a search in the other section. You can also set up the search to be a header cover; so that when you click on the search it covers up the header, or you can make it full screen; so when you click on the search it covers the whole screen.

You also have the option to configure the height of your top header the way you want it, and to add a bottom border and a border color if you want to (03:31)

To Read: Create a Free Sticky Transparent Header in Elementor

Add a Below Header to your Website

In the same way, when you select the Below Header option, you can configure it the way you want to. 

For example, you can select Layout 2 (with one column), and under Section 1 you can choose to have Text/html and under Text/html you can add your text, for example, ‘East to West Astra is Best’ (04:53).

You can also add a bottom border and add a border color, as well as adjust the height of your header.

When you’re done, just click the Publish button and you can reload your preview page to see your results.

Also Read: Make Free Header & Footer using Hello Elementor Theme

In closing

That’s how you can make use of the Top and Bottom headers feature in your WordPress website using the Astra theme.

For any questions or comments about this article or any other, let me know in the comments section below. Remember to subscribe to my newsletter and youtube channel for more tips and tutorials.

Also Read. . .

Newsletter Subscription (EF)

Leave a Comment

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

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot


Elementor is the WordPress most popular page builder with over 10 million active users