Astra theme free version does not have customization option to change header background color.
To change header background color in WordPress Astra theme, you have two easy options.
As a first option, you can purchase “Astra Pro!” addon. With Astra Pro, you can change header background color from theme header customizer [Appearance > Customize > Header] options.
But, if you want to change header background color without buying an Astra Pro addon, then the following guide is for you.
Following is the second free custom CSS option to change Astra theme header, site title and header menu link text color change.
NOTE: In CSS code default background color is #336699 and text color is #ffffff. You can change this color code value as per your requirement.
Change Astra header background color
Given CSS code will change the background color of the theme header section.
Copy following CSS code and add in theme Additional CSS [Appearance > Customize > Additional CSS] option.
.ast-primary-header-bar{
background-color: #336699;
}Check preview in the right sidebar. And, click the “Publish” button if change looks fine in preview.
Change Astra header background and site title name color
Given CSS code will change theme header background and site title text color.
Copy following CSS code and add in theme Additional CSS [Appearance > Customize > Additional CSS] option.
.ast-primary-header-bar{
background-color: #336699;
}
.site-title a, .site-title a:hover{
color: #ffffff;
}Check preview in the right sidebar. And, click the “Publish” button if change looks fine in preview.
Change Astra header background and header menu link text color
Given CSS code will change header background, site title text and desktop site header menu link color. This code will also change toggle header menu icon (three line icon) color in mobile view.
Copy following CSS code and add in theme Additional CSS [Appearance > Customize > Additional CSS].
.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;
}Check preview in the right sidebar. And, click the “Publish” button if change looks fine in preview.
Change Astra header background, site title name and menu link text color
This section contains all CSS code for Astra theme header color change. Given code will change header background, site title, header menu link and mobile view menu icon color.
Copy following CSS code and add in theme Additional CSS [Appearance > Customize > Additional CSS].
.ast-primary-header-bar{
background-color: #336699;
}
.site-title a, .site-title a:hover{
color: #ffffff;
}
#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;
}Check preview in the right sidebar. And, click the “Publish” button if change looks fine in preview.
