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. I’ve been building WordPress websites with Astra for years, and the most common question I receive is:

“Why can’t I find the option to change my header background color?”

The answer depends on whether you’re using Astra Free or Astra Pro. I’ll show you both methods along with common fixes if your changes don’t appear.

In the first method, you need to install the Astra Pro plugin, which includes settings to configure the background color of your site header. It is the premium feature of the Theme. Astra paid version has a Header builder; with this functionality, you can easily modify the Header color of your business site.

If you use the free version of the Astra theme, the second method is for you! You need to add the CSS code within the specific section to set your preferred background color for the site header. Get the color code of your choice and add it to the CSS code I provided in this blog post.

Let’s begin with the easiest method.

Disclosure: We get a commission when you buy a product via our affiliate link at no additional cost.

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 code above, I have set the code color to my choice (#ffffff). You have to 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. 

Change Mobile Header Background Color

If your desktop header changes but the mobile header doesn’t, use:

.ast-mobile-header-wrap{
background:#2663EB;
}

This applies the color to the mobile header.

How to Change Sticky Header Background Color In Astra?

If you’ve enabled a sticky header, it may continue displaying the original background.
Add CSS

.ast-header-sticky{
background-color:#2563EE;
}

You can use a different color for the sticky header to improve visibility while users scroll.

Note – Use your preferred color code, I have used – #2563EE

Why Isn’t the Header Background Color Changing?

If the new color isn’t visible, check these common causes.

1. Transparent Header Is Enabled

A transparent header overrides the normal header background on supported pages.
Disable the Transparent Header or customize its colors separately.

2. Browser or Cache Plugin

Clear – Browser cache, WordPress cache and CDN cache (if applicable). Then reload the page.

3. Page Builder Is Overriding Astra

If you’re using Elementor, Spectra, or another page builder, the page template or header settings may override Astra’s defaults. Check whether the page builder is controlling the header appearance.

Frequently Asked Questions

Wrapping Up

Astra is a highly customizable WordPress theme for building attractive sites with high user engagement. It provides full design control so that we can create a good online presence to establish our business brand. There are two ways to change the header background color in Astra

• Astra Pro: Use the Header Builder settings (no coding required).
• Astra Free: Add a small CSS snippet from the WordPress Customizer.

Customizing your header background color is one of the easiest ways to match your website with your brand identity. Whether you want a solid, transparent, or sticky header, this amazing WordPress theme offers multiple ways to achieve it.

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