Change Logo

Hey,

I would like to have a transparent header that lays over a hero background image. This should have white text and a white logo. I was able to pull this off already.
When scrolling down the page, the page header should shrink with a white background-color the text should be black and also the logo should change to a black version.

Is this possible? Especially to change the logo?

Thanks

Hey AlbatiQue!

Would it be possible for you to share with us the URL to the site so we can take a close look, please?

Thanks!
Jun

Hey,

I’m working local now. But it would be something similar like on this website:
https://www.conferencecalling.com/

Hi AlbatiQue,

For a transparent header, you will want to following the instructions here - http://forum.wpbeaverbuilder.com/knowledge-base/transparent-headermenu/

To replace your logo when scrolling we’re going to need to know what Fixed Header layout you’re going to be using. Once we know this, we can provide the necessary CSS.

Thanks,
Danny

Hey,

I’m using the shrink header type.

Thanks!

Hi AlbatiQue,

To replace the logo using the shrink option, please try the following CSS:

.fl-page-header-primary.fl-shrink-header .fl-page-header-logo {
  background-image: url(Add Image Link Here);
  background-repeat: no-repeat;
}
.fl-page-header-primary.fl-shrink-header .fl-logo-img {
  opacity: 0;
}

Thanks,
Danny