Change Header Logo and Background Color on Scroll

[bartenderonduty]

Hi Themeco Team,

I am trying to add an effect where the header logo changes from one version to another, and the header background changes from transparent to solid on – both with the same transition speed. I have tried almost all possible solutions I found in the X theme forums, but the solutions are either for changing the header logo OR the header background on scroll – not both at the same time with the same transition. I tried to combine multiple solutions but it ended up breaking my site, so I’m definitely doing something wrong here.

Can you suggest some JS and/or CSS that would make the header logo change to a different logo AND make the header background transition from transparent to solid upon scrolling (and back if the user scrolls to the top of the page)?

Any help you can provide would be appreciated.

Thank you!

[ruenel]

Hello @bartenderonduty,

Thanks for writing in! Adding custom JS and CSS will just complicate things. And this is way beyond the scope of our support. What you have in mind is much more easier in you use Pro Theme’s custom header builder. With the custom builder, you can create two separate bars which will display upon page loading and the other bar with a different logo and background color as soon as the user scroll the page.

Hope this makes sense.

[bartenderonduty]

Is there a way for you to merge the JS you provided in several other support requests to achieve this effect?

[ruenel]

Hey @bartenderonduty,

Are you using X theme? Please be advised that any given custom JS or CSS is merely an example for the user to get started with their customize. It may work or sometimes needs more modifications. Merging custom JS may be possible.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Regards.

[bartenderonduty]

Yes, I’m using the X theme on all of my sites.

[christian]

Hey @bartenderonduty,

Please upgrade to Pro or hire a developer to build a custom header for you. We do not do custom coding as part of our theme support. The codes we share here in the forum serve only as guides. The user should learn from them. Merging, tweaking or enhancing them is not a part of our theme support as they are not official parts of our products.

Thank you for understanding.