Making The Header Transparent

[chuckpnc]

Good day!

This is probably simple for you guys but how do I make my header transparent so it appears the logo and menu options just sit at top of the background image?

Thanks,
Chuck.

---

[Marcy Diaz]

You can add this to your Additional CSS in the Customizer, if you’ve removed the dark image overlay.

.site-header {
    background-color: transparent;
}

If you still have the overly, you will want to add an overlay on the site-header to match the rest of the image.

.site-header {
    background-color: rgba(0, 0, 0, .8);
}

or

.home .site-header {
    background-color: rgba(0, 0, 0, .4);
}

---

[Author]

Posts