Header Transparency / On top of Fullscreen Slider

Hi Kyle!

Thank you for using Enfold.

You don’t need to add any css modification to make a transparent header. Edit the page then set the Layout > Header visibility and transparency to “Transparent Header”.

Best regards,
Ismael

Hey!

You should remove the css modification because it will set the header in every page to “fixed”.

#header {
    position: fixed !important;
}

If you want a fixed or sticky header, go to the Enfold > Header > Header Behaviour panel. Enable the “Sticky Header” option.

Cheers!
Ismael

Hey!

1. On some pages, I wish to have a transparent header over top of an full screen/width image.

Set the “Header visibility and transparency” to “Transparent header”.

2. On others, I wish to have a header above a full width content box.

Set the “Header visibility and transparency” to “No transparency”.

3. I do NOT want a fully transparent header, thus I need to change the opacity… but I think this only applies to the pages where there is a picture underneath.

Set the “Header visibility and transparency” to “Transparent and Glassy Header” instead of “Transparent header”. If you want to adjust the transparency, just add this css code.

#top .av_header_glassy.av_header_transparency .header_bg {
    background-color: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Default value is 0.1.

4. I would like the header to stick…. BUT I would like it to become MORE transparent when sliding down (compared to the initial transparency/opacity when at the very top).

To make it more transparent on scroll, use this css code:

.header-scrolled .header_bg {
    opacity: .1;
}

Regards,
Ismael

Hi,

Thanks for the feedback. Please try this instead:

.header-scrolled .header_bg {
    opacity: 0.1 !important;
}

Best regards,
Rikard

Hi moshpitjoey,

Please check the header setting in the layout menu for each page you have this problem on.

Best regards,
Rikard

Hi,
Sorry for the late reply and thanks for the link to your site. Your homepage doesn’t seem to have transparency set for the header, based on the classes in the source code.
I assume you have transparency set on your page in the backend:

I also note that it looks like you are using Elementor on the site, so perhaps there is a conflict, did you try disabling your plugins?

Best regards,
Mike

Hi,
Typically the header items colors are chosen by the alternative colors in the Enfold Theme Options ▸ General Styling
But if these don’t match the colors that you want to use we can help with so custom css. Please open a new thread and link to your site and explain the colors that you want to use. Since this is not your thread you won’t see anything we write in the Private Content area, so it would be better to open your own thread. Thank you for your understanding.

Best regards,
Mike