Transparent Header become opaque upon scrolling

Hi all, I would like to create a transparent header that becomes a solid colour upon scrolling.

An example would be like this. https://visticawa.com/

Currently, I have already created the transparent header using this.
https://kb.wpbeaverbuilder.com/article/237-merge-page-content-into-the-header

However, how do i make it a solid colour upon scrolling?

  • Ben

I would like to know this as well. Any update on this?

Hello, If you are using beaver builder theme builder for creating header you can add a small CSS code in your customizer section

header.fl-theme-builder-header-scrolled {
background-color:blue !important;
}

Hello, this is also exactly what I need to do but when I tried this it didn’t work. Anyone else give this a go successfully?

Thanks in advance

Can you please send the link to your site. I can look at it and update you

1 Like

Hey! Thanks for getting back to me, I think I figured it out thank you. However I have another site I’m building and I’m trying to get rid of the thin lines on the header.

I wonder if you can advise on the right css to input to get rid of them! The site is miniandme.skizzar.site if that helps!! Thanks in advance

header.fl-page-header div.fl-page-nav-wrap {
border-bottom: 0px solid transparent !important;
border-top: 0px solid transparent !important;
}

Zaheer… you da best! Have an amazing day! THANK YOOOOU!