# How To Add A Top Bar In Astra Theme? (Without CSS Code)
Here are 7 straightforward steps to add a top header bar to your site using the Astra theme. You don’t have to write any CSS code for this.
Author: Abhijit Rawool
Source: https://abhijitrawool.com/how-to-add-top-bar-in-astra-theme/
Published: 2020-11-07T04:24:33Z
Updated: 2021-03-24T04:59:06Z
Want to add a top header bar on your website using the Astra theme?
**Given below are the steps to add a top bar in the Astra theme:**
1. **Install and activate the Astra Pro addon.**
2. **Activate the Header Sections module of Astra Pro addon.**
3. **Go to the front-end of your website.**
4. **Click on the Customize link from the top Admin bar.**
5. **Go to Header > Above Header in the WordPress Customizer panel.**
6. **Select Layout 1 or Layout 2 to display the top bar.**
7. **Publish your changes.**
Let’s take a detailed look at each of these steps now.
## How To Add A Top Header Bar In Astra Theme Using Astra Pro Addon?
First, install and activate the [Astra Pro addon plugin](/recommends/astra-pro/ "Astra Pro").
Once this plugin is active, go to Appearance > Options in the WordPress Admin panel and activate the Header Sections module.
[
](/wp-content/uploads/2020/11/activate-header-sections.png)
Now, go to your website’s front-end and click on the Customize link from the top WordPress Admin Bar.
[
](/wp-content/uploads/2019/02/customize-link.png)
In the WordPress Customizer panel, go to Header > Above Header and select either Layout 1 or Layout 2 for the top bar in the Layout section.
[
](/wp-content/uploads/2020/11/above-header-settings.png)
The top bar should now display on your website.
Click the Publish button to publish your changes.
And that’s it!
That is how you can add a top header bar in the Astra theme.
Okay! What next?
## Next Steps…
There are a ton of options that you can play with for the top bar in the Astra theme.
Use these options to change the look-and-feel of your top bar as per your needs.
Apart from that, the Astra Pro addon also comes with a lot of design options.
So, explore all of them to build your website without any code.
Here are some tutorials to help you with this:
- [How To Add A Search Bar In The Astra Theme Without Code?](/how-to-add-search-bar-in-astra-theme/)
- [How To Change Header Background Color In Astra Theme (No CSS)](/how-to-change-header-background-color-in-astra-theme/)
- [How To Build A WordPress Website With Astra And Elementor? (5 Mins)](/how-to-build-a-wordpress-website-with-astra-and-elementor/)
- [How To Remove Page Title In Astra Theme? \[Without Code\]](/how-to-remove-page-title-in-astra-theme/)
- [How To Add A Slider In The Astra Theme? \[2 Different Methods\]](/how-to-add-slider-in-astra-theme/)
- [Astra Theme Review – Why I Am Using Astra Since 2017](/astra-theme-review/)
- [How To Change Header And Menu Colors In Astra Theme? (Easily)](/how-to-change-header-and-menu-colors-in-astra-theme/)
## Video Tutorial
[Get Astra Pro Addon](/recommends/astra-pro/ "Astra Pro")
[Download Website Builders’ Toolbox](/toolbox/)
## Final Thoughts
I have purposefully kept this tutorial short and straightforward.
If you enjoyed reading this short little tutorial, then please share it with your friends. I will really appreciate it.
](/wp-content/uploads/2020/11/activate-header-sections.png)
Now, go to your website’s front-end and click on the Customize link from the top WordPress Admin Bar.
[
](/wp-content/uploads/2019/02/customize-link.png)
In the WordPress Customizer panel, go to Header > Above Header and select either Layout 1 or Layout 2 for the top bar in the Layout section.
[
](/wp-content/uploads/2020/11/above-header-settings.png)
The top bar should now display on your website.
Click the Publish button to publish your changes.
And that’s it!
That is how you can add a top header bar in the Astra theme.
Okay! What next?
## Next Steps…
There are a ton of options that you can play with for the top bar in the Astra theme.
Use these options to change the look-and-feel of your top bar as per your needs.
Apart from that, the Astra Pro addon also comes with a lot of design options.
So, explore all of them to build your website without any code.
Here are some tutorials to help you with this:
- [How To Add A Search Bar In The Astra Theme Without Code?](/how-to-add-search-bar-in-astra-theme/)
- [How To Change Header Background Color In Astra Theme (No CSS)](/how-to-change-header-background-color-in-astra-theme/)
- [How To Build A WordPress Website With Astra And Elementor? (5 Mins)](/how-to-build-a-wordpress-website-with-astra-and-elementor/)
- [How To Remove Page Title In Astra Theme? \[Without Code\]](/how-to-remove-page-title-in-astra-theme/)
- [How To Add A Slider In The Astra Theme? \[2 Different Methods\]](/how-to-add-slider-in-astra-theme/)
- [Astra Theme Review – Why I Am Using Astra Since 2017](/astra-theme-review/)
- [How To Change Header And Menu Colors In Astra Theme? (Easily)](/how-to-change-header-and-menu-colors-in-astra-theme/)
## Video Tutorial
[Get Astra Pro Addon](/recommends/astra-pro/ "Astra Pro")
[Download Website Builders’ Toolbox](/toolbox/)
## Final Thoughts
I have purposefully kept this tutorial short and straightforward.
If you enjoyed reading this short little tutorial, then please share it with your friends. I will really appreciate it.