Header Logo Change on Scroll

Question

Hi there, I wanted no logo to appear in the header until I scroll down. In order to accomplish I created a transparent logo as a place holder for the regular logo... I then used data sticky logo to set the regular logo... It is now performing the way I would like... But I imagine there is a more elegant way to accomplish this... Is there? In short, I would like NO logo on page load... But as soon as I scroll I would like the logo to appear... Here is the code I used to accomplish what I wanted.…

SemiColonWeb · Accepted Answer

Hello, You can try something like this: This should definitely work fine. Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

7Lexen7 · Answer

That would go in custom css correct? And that would apply to all pages? Looking for a way for just specific pages...

Semicolon Web · Answer

Hello,

Yes, you will need to add this in the css/custom.css File to apply this on all the Page.

However, if you would like to apply this only to Custom Specific, create another CSS File and add this code, then link it in the Document `` on these pages.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.