Trying to get .site-logo to appear on scroll

Hi folks,

I’m trying to get my .site-logo to display/fadeIn when the user scrolls. Not displayed when the page loads.

I’ve been trying to piece together bits of .js and .css from a few other kind of similar queries on here, but nothing gets exactly what I’m hoping for.

The closest I got to it was this post >>

…but unfortunately it didn’t have the desired effect on mobile. The header and menu icons weren’t visible at all using the above ‘almost there’ solution.

Any help and guidance would be massively appreciated.

Thanks so much in advance.

All the best,


The site I’m working in is

Hello there,

It looks like there’s third party CSS script that hides it. To avoid it, try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .home-logo-gone {
      opacity: 1 !important;


Thank you Kharis,

That ‘almost’ solved my issue. The header and menu options now appear on mobile. But for some reason (even after tweaking a few variables) the logo only appears after scrolling (on mobile).

I’m a bit of a novice to .js and my .css skills are “getting there” so thank you again for your patience in advance.

Btw, I do all my .css/.js editing in a plugin called Simple Custom CSS and JS by I find it very reliable and generally seems to override any other script.