How To : Sticky Header Transparent to Opaque Scroll Trigger

[PaulMacklin]

Hi there,

I was hoping you’d be able to help me. I’m trying to create the header effect seen on this site - https://www.kidsquest.com/

I found this tutorial - https://www.youtube.com/watch?v=B-XrBpoRASw, but it doesn’t quite do what I want it to. I want the current header bar to fade to black and keep the logo sticky rather than swapping header bars - is that possible?

[thai]

Hey @PaulMacklin,

That is technically possible. However, that would fall beyond the scope of our support since it would require custom development. You need to contact to a 3rd party developer to help you with this.

Thank you for understanding.

[PaulMacklin]

Apologies, but I’m not sure I do understand - to clarify, does the theme have the tools to make this possible or does it require custom coding?

[thai]

Hi @PaulMacklin,

The stick option is available in X theme. Please navigate to X > Theme Options > Header > NAVBAR > NAVBAR POSITION > select Fixed Top:

To make it change to opaque background color, you need to add this custom CSS under Theme Options > CSS:

.x-navbar.x-navbar-fixed-top {
    background: rgba(255, 255, 255, 0.75);
}

To make your header look exactly this https://www.kidsquest.com/ example. You need to use the custom codes.

Hope it helps