Custom CSS Code to apply Header transparency

[cdhimit]

Hi

Can someone pls share the custom css code to apply #000 ; 50% transparency to the Header on the Homepage ?

Although, there is a theme option to enable 100% transparency, I want to achieve 50% transparency with a custom css code.

Screenshot

Site URL

Thanks in Advance.

[m_hutley]

@cdhimit

there is a theme option to enable 100% transparency,

… 100% transparency? So… just making things invisible? Why would that be an option?

[PaulOB]

@cdhimit

Can someone pls share the custom css code to apply #000 ; 50% transparency to the Header on the Homepage ?

Maybe this:

.home .sticky-wrapper{
    background:rgba(0,0,0,0.5);
}

[cdhimit]

@paul

Issue fixed.

Thanks

[cdhimit]

@hutley

Apologies. I got the transparency % wrong.

With the theme option transparent header enabled ( & without @dave’s code), the header looks like the screenshot below:

It’s 0% transparency.

With @paul’s code & with the theme option enabled, the header looks:

[PaulOB]

I’m not sure what you are asking as the black portion is the header. The problem is that your content underneath has padding and so there is a gap at the side. There is no element that just matches the content underneath in that space.

You could fake it like this:

.home .sticky-wrapper{
    background:transparent;
}

.home .sticky-wrapper:before{
    content:"";
    position:absolute;
    inset:10px;
    background:rgba(0,0,0,0.5);
    pointer-events:none;
}

[cdhimit]

Hi Paul

I got rid off the gaps by setting the Slider to “Full width” under the Elementor settings.

It’s all good !