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). 

ZbPMBbVRauLeEcLJJsmPS5HwFDnL19hoOTDDAG8xbbKlkOXRO8jWbWPlPnXRhwYvPYZZKFoOIoK0o5E lbe0rhLWh ZjmTO wh5zrky7BXfV9XAO5UwaY1KcF5NPKpz18XIXR439

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)

hRpKlZbc2CvNkawno5yPH5UeYOoLT460Bvj CF07xDbJdYHHKjDvlSssn1Dtc455I5urlrwoA1e73nQ4UniFwWU5kFzsp2nPj7exTwWKhXFnMYGi253B3WBCR5KtTLEdyR

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).

L dqqGQWoL OW9dS7iEyNP5gRSe95ZsXkk5QH4nlpoTHFWHx2xdbQAVzsgel4bt8ioYlaX5e

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. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

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