Hide logo until you scroll down

Hi, sorry for the delay. Been very busy here lately.
I actually have some custom css that I wrote to do this for the pro version of my plugin. The code allows you to simply add a class or id of “show” to show on scroll or “hide” to hide. This will work with anything in the header once the code is in place.
I am answering this on my phone right now but I’ll be on my computer to get that code in just a little bit and will post the code with instructions below.
Thanks for your patience!

Ok, actually, I found a client site where I did exactly this. So I got the code I used from there.

On the logo, under advanced tab, in CSS Classes field, add “logo” (not .logo, no period)
Then, add this code to the site wherever you keep custom css

/* SHOW LOGO ON SCROLL */
.logo img {
    opacity: 0;
    -webkit-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

.she-header .logo img {
    opacity: 1 !important;
}

You might want to turn off the “Shrink Logo” and just set the logo to a smaller size.

Let me know if this works for you

• This reply was modified 2 years, 9 months ago by Robert Wattner.

@melanie71 Hi, did this work for you?

@rwattner PERFECT! Thank you so much for all your help ??

Happy to help!

Hi,

I’m trying to do the same thing here: https://new.suzannew.com/

I have a transparent header so I slightly altered the code to:

<style>
.logo_img {
opacity: 0;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
transition: opacity 0.4s ease-in-out;
}

.she-header-transparent-yes .logo_img {
opacity: 1 !important;
}

</style>

But it’s not working. If possible, can you please take a look? Thanks for your help!

You shouldn’t have to alter the code for a transparent header. Try using the original code with the “logo” class added to your image. Let me know if that works

Worked like a charm – thank you!

Happy to help