How To Change Header Background Color In Astra Theme?

Do you want to change Header background Color in Astra theme? You have come to the right place to learn two simple methods to fix the Header color of your WordPress site built with Astra theme. Let me explain the uncomplicated ways to design a tailored header for your business branding. 

In the first method, you need to install the Astra Pro plugin that contains settings to set up the background color of your site header. Yes, it is the premium feature of the Theme. Astra paid version has a Header builder; with the help of this functionality, you can easily modify the Header color of your business site.

This method is for you if you use the free version of the Astra theme! Add the CSS codes under the specific section to get your preferred color background for the site header. Get the color code of your choice and add it to the CSS code I provided in this blog post. This is the simple method to get the job done. 

Let’s see the methods in detail! 

Method 1 – Use Header Builder To Change Astra Header Color 

Ensure you have installed the Astra Pro plugin to use the Header builder. 

Step 1: Go to Astra Theme settings and click “Customize.”

Step 2: It will take you to a page with the customization settings on the left. Click “Header Builder“. Check the below image for reference. 

Step 3: After selecting the Header builder, you will get the settings option shown in the following image. Now, click primary header settings, which is located in the middle (See the screenshot below; I have marked that option)

Step 4: You will get several settings to design a unique header. By default, you will be in “General” settings; Go to the “Design” tab to get the “Background” settings.

Step 5: Look at the arrow I drew in the above image. Click it and select your preferred background color. 

Step 6: Click the “Publish” button at the top. Check the output displayed in the above picture. That’s all. You have learned how to change the header background color in Astra theme. 

Let me explain the second method! 

Method 2 – Use CSS Codes To Modify Astra Theme Header Background Color

You may implement this method if you have installed an Astra free theme for your WordPress site. Here, you have to add the CSS codes to alter the header background color of your site. Let me give you those codes and show you where to add them!

Step 1: Go to Astra Theme Settings and click “Customize.“

Step 2: You will get the customization settings on your left. Click the “Additional CSS” option. 

Step 3: Copy and paste the following code and paste it under the CSS section. 

.main-header-bar{

background-color:#ffffff;

}

Note – In the Above coding, I have given the code color (#ffffff) of my choice. You may replace it with your desired one! 

Step 4: Click the “Publish” button. That’s it! You have completed changing the Astra theme header background color. 

Wrapping Up

Astra is a highly customizable WordPress theme to build attractive sites for high user engagement. It provides full design control so that we can create a good online presence to establish our business brand. 

I have recently written a blog article to create a transparent header, and now, I have taken a nice opportunity to explain how to change the header background color in Astra theme for WordPress. 

I hope you have understood the easy ways of fixing the Astra header background color with and without coding. I suggest you buy the Pro theme version that offers extreme design control to build impressive websites for your audience.