Want to change the background color of your Header in the Astra theme? Here are two easy ways to change the header color of your WordPress website using the Astra theme. I will explain how to create a customized header for your brand.
Install the Astra Pro plugin to change the background color for your Header. It is a premium feature. The Astra paid version comes with a header builder. With this feature, you can modify the color of the Header of your website.
If you are using the free Astra theme, this is the method for you! To get the color you want for your site header, add the CSS code under the section. Add the color code you want to the CSS code that I have provided. It’s easy to do.
Method 1 – Use Header Builder To Change Astra Header Color
Install the Astra Pro plugin before using the header builder.
Step 1. Click ” Customize” in the Astra Theme settings.
Step 3: It will take you to the page where the customization options are on the left. Click ” header builder.” Refer to the image below.
Step 3 After selecting the header builder, you’ll get the options shown in the image below. Click on primary header settings (see screenshot below; I’ve marked this option).
Step 5: You can design your Header using the settings. You will default to ” General”. Click on the ” Design ” tab to access the ” Background”.
Step 6: Check out the arrow that I have drawn in the image above. Click on it to select the background color you prefer.
Step 6: Click on the “Publish” icon at the top. The output should be displayed in the image above. That’s all. This is how you can change the background color of the Header in the Astra theme.
Use CSS codes to modify the Astra theme header background color
This method can be used if you’ve installed the Astra theme for your WordPress website. You will need to enter the CSS code to change the background color for the Header of your website. I’ll show you how to add the codes!
Step 1. Click on ” Customize” in the Astra Theme settings.
Step 3: The customization options will appear on the left. Click on the ” CSS Additional” option.
Step 3: Paste the code below in the CSS section.
.main-header-bar background-color:#ffffff;
You may replace it with your desired one! It can be replaced with the desired color!
Step 4: Click on the ” Publish ” button. That’s it! The Astra theme header color has been changed.
Wrapping up
Astra is a highly customizable WordPress Theme for building attractive sites with high user engagement. It gives us full control over the design so we can establish a strong online presence for our business.
Recently, I wrote a blog post to create a transparent Header. Now, I’ve taken the opportunity to explain how you can change the background color of your Header in the Astra theme.
You should now be able to fix the Astra header color without any coding. I recommend that you purchase the theme version, which offers extreme design controls to create impressive websites for your audiences.
