# How To Change Header Background Color In Astra Theme (No CSS)

Here are 7 simple steps to change the background color of the header in the Astra theme. You don’t need to write any CSS code to do this.

Author: Abhijit Rawool
Source: https://abhijitrawool.com/how-to-change-header-background-color-in-astra-theme/
Published: 2020-11-02T05:17:09Z
Updated: 2020-11-09T04:29:38Z

Want to change the header background color in the Astra theme?

**Given below are the steps to change the header background color in the Astra theme:**

1.  **Install and activate the Astra Pro addon.**
2.  **Activate the Colors & Background 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 > Primary Header in the WordPress Customizer panel.**
6.  **Set the desired header background color in the Background field under the Color section.**
7.  **Publish your changes.**

Let’s take a detailed look at each of these steps now.  
  

## How To Set Header Color 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 > Astra Options in the WordPress Admin panel and activate the Colors & Background module.

[

<img loading="lazy" decoding="async" width="1024" height="740" src="/wp-content/uploads/2020/11/activate-colors-background-module-1024x740.png" alt="Activate Colors &amp; Background module">

](/wp-content/uploads/2020/11/activate-colors-background-module.png)

Now, go to the front-end of your website and click on the Customize link from the top WordPress Admin Bar.

[

<img loading="lazy" decoding="async" width="462" height="30" src="/wp-content/uploads/2019/02/customize-link.png" alt="Customize Link">

](/wp-content/uploads/2019/02/customize-link.png)

In the WordPress Customizer panel, go to Header > Primary Header and set the desired header background color in the Background field under the Color section.

[

<img loading="lazy" decoding="async" width="655" height="1024" src="/wp-content/uploads/2020/11/set-header-background-color-655x1024.png" alt="Set header background color">

](/wp-content/uploads/2020/11/set-header-background-color.png)

Click the Publish button to publish your changes.

And that’s it!

That is how you can set the header background color in the Astra theme.

Okay! What next?  
  

## Next Steps…

There are a ton of options that Astra Pro addon gives you.

So, activate all the Astra Pro modules and play with them.

Using all the Astra Pro options, you will be able to design your website without writing any code.

**Here are some tutorials to help you with this:**

-   [Astra Theme Review – Why I Am Using Astra Since 2017](/astra-theme-review/)
-   [Astra vs Genesis Theme – Why Comparing These Two Themes Is Stupidity](/astra-vs-genesis/)
-   [How To Build A WordPress Website With Astra And Elementor? (5 Mins)](/how-to-build-a-wordpress-website-with-astra-and-elementor/)
-   [How To Add A Search Bar In The Astra Theme Without Code?](/how-to-add-search-bar-in-astra-theme/)
-   [How To Add A Top Bar In Astra Theme? (Without CSS Code)](/how-to-add-top-bar-in-astra-theme/)
-   [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/)  
      
    

## Video Tutorial

<iframe loading="lazy" title="Change Header Background Color In Astra Theme" width="500" height="281" src="https://www.youtube.com/embed/GOjRFxSNlQg?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

[Download Website Builders’ Toolbox](/toolbox/)

  

## Final Thoughts

I like to keep such tutorials short and to the point.

If you enjoyed reading this short little tutorial, then please share it with your friends. I will really appreciate it.