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.