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