Customizing The Header Background Image in Astra Theme For WordPress

Astra theme for WordPress, at least the free version does not allow background images in the header through the customizer. In order to add a background image to the header you will need to add some css. Go to Appearance/Customize/Additional CSS.

.main-header-bar {background-image: url("http://yoursite.com/wp-content/uploads/2017/10/your-header-logo.png");background-repeat: no-repeat;
}

Here’s a bit of CSS that addds a drop shadow and background color to the header.
.main-header-bar {background: #FFBC00;box-shadow: 0px 3px 3px #b8b8b8;background-image: url("http://yoursite.com/wp-content/uploads/2017/10/your-header-logo.png");background-repeat: no-repeat;
}

Continue Reading Customizing The Header Background Image in Astra Theme For WordPress

Adding A Background Color and Dropshadow To Astra Theme Header

Astra is the new kid on the block of lightweight, easily customizable WordPress themes along with OceanWP and the one that started this trend Generatepress. All the free version of these themes are already quite powerful out of the box but the pro versions offer a lot more customizability. I would say OceanWP’s free version right now has the most features out of the box.

This site actually runs on Astra. I chose it more for it’s future abilities and it’s claim to be the fastest WordPress theme. I wanted custom background color and a thin dropshadow under the header and found there was no setting in the customizer to do that. Instead you will need to go into Appearance/Customize/Additional CSS

In there just add this piece of code.

.main-header-bar {
background: #f4c842;box-shadow: 0px 3px 3px #b8b8b8;
}

The CSS box shadow property sequence is horizontal shadow size, vertical shadow size, the blur spread size and shadow color.

 

Continue Reading Adding A Background Color and Dropshadow To Astra Theme Header