How To Change Header Background Color In WordPress Astra theme

Astra is a popular WordPress theme that is known for its lightweight design and fast performance. It is a multipurpose theme that can be used for various types of websites, including blogs, business websites, and e-commerce stores. One of the reasons for its popularity is that it is easy to use and customize. It comes with a variety of pre-designed templates and a drag-and-drop page builder, which makes it easy to create professional-looking websites quickly. Today's blog is about how to change the header background color of this theme with CSS and without CSS.

Change Header Background Color In The Astra Theme

The free version of the Astra theme does not allow you to change the color of the header background. There are two simple ways to change the header background color in the WordPress Astra theme.

You can immediately begin by purchasing the "Astra Pro addon". The theme header customizer [Appearance > Customize > Header] options in Astra Pro allow you to change the background color of the header.

Now, navigate to your website's front end and click the Customize link in the top WordPress Admin Bar.

Go to Header > Primary Header in the WordPress Customizer panel and enter the desired header background color in the Background field under the Color section.

To publish your changes, click the Publish button.

And there you have it!

However, if you want to change the color of the header background without purchasing an Astra Pro addon, the following guide is for you.

The following CSS code will alter the background color of the theme header section.

Copy the CSS code below and paste it into the theme's Additional CSS [Appearance > Customize > Additional CSS] option.

.ast-primary-header-bar{
	background-color: #336699;
}

To change Astra header background and site title name color, use the following code.

.ast-primary-header-bar{
	background-color: #336699;
}
.site-title a, .site-title a:hover{
	color: #ffffff;
}

Furthermore, to change the Astra header background and header menu links text color, this code will help you.

.ast-primary-header-bar{
	background-color: #336699;
}
#ast-desktop-header .main-header-menu > .menu-item > .menu-link{
	color: #ffffff;
}
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg{
	fill:#ffffff;
}

And that's it!

Wrapping Up

Astra also has a large community of users and developers, which means that there is a wealth of support and resources available for those who are using the theme. It is regularly updated with new features and improvements, and it has a wide range of third-party integrations and plugins that can be used to enhance its functionality.

Overall, Astra is a popular choice for WordPress users because it is fast, lightweight, easy to use, and highly customizable. So, its highly recommended!