Site header opacity


I set the Site Header Type to No header(only menu) and the Menu Background color to black,
Customize/Header area/Header type
Customize/Colors/Menu background

So then I have black header on all pages except the front one which is totally fine but I can’t set its opacity to something like 0.5 and tried this code,

background-color: rgba(0,0,0,0.5);

It works for the opacity but I get the header on the front page as well which I don’t want.

How can I set the Menu background color’s opacity without a header on the front page?

My site :

Thank you for your support.

Hello there,

Apply custom css code below in order to set header opacity to all pages except on home page:

body:not(.home) .site-header {
    background-color: rgba(0,0,0,0.5);

You can apply the code with this plugin

All the Best!

Excellent, that code works nicely. Thank you.


how can I set the header opacity just for the homepage?

Thank you.