Header vs Overlay

I want to adjust header opacity and/or overlay opacity. I don’t know which is which! Please clarify what the header is, and what the overlay is. Thanks!

Hello there,

Over the header image there’s an element which blocks the header image and its opacity is set to 70% (by default). To change it, you can use this CSS code:

.header-image .overlay {
  opacity: 0;
}

0 will completely remove the overlay. To lower the opacity, you can use:

.header-image .overlay {
  opacity: 0.2;
}

To apply custom CSS code to your site, add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

@kharisblank, I do not see the difference. Perhaps it is because of the CSS code we already added.

It may be the menu background I want to change, not the overlay. It’s great the way it is now: transparent until user scrolls down. When it appears, however, would like to change opacity. Hope this makes sense.

Hello there,

Try this code:

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

Regards,
Kharis

Bingo. Thanks so much!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis