Header background color overlay

This is how you get a background color ovelay for your normal header using CSS.

.site-header, .inside-header {
    position: relative;
}

.site-header:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255,0);
    background: linear-gradient(174deg, rgba(255, 255, 255, 0) 30%, rgba(0, 212, 255, 1) 100%);
}

Adjust the linear-gradient to suit. This site is great for calculating gradients.

Click here to learn how to create background color overlays for the header element.

GeneratePress logo

Need help on customizing GeneratePress or GenerateBlocks?

Helpful info

Adding CSS

Adding PHP

Using a child theme

Keep up to date with newly released articles

Sign up to the Knowledge Base newsletter

You will only receive an email when new content is added in the Knowledge Base. No spam, that's a promise!