Hide logo until you scroll down

  • Resolved melanie71

    (@melanie71)


    4 years, 3 months ago

    Hello! Such a great plugin with so many features 🙂

    Is it possible to hide the logo on Page load, and only display in the sticky header on scroll?

    Regards
    Melanie

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Contributor Robert Wattner

    (@rwattner)

    4 years, 3 months ago

    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!

    Plugin Contributor Robert Wattner

    (@rwattner)

    4 years, 3 months ago

    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

    Plugin Contributor Robert Wattner

    (@rwattner)

    4 years, 3 months ago

    @melanie71 Hi, did this work for you?

    Thread Starter melanie71

    (@melanie71)

    4 years, 3 months ago

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

    Plugin Contributor Robert Wattner

    (@rwattner)

    4 years, 3 months ago

    Happy to help!

    quietthunderdesigns

    (@quietthunderdesigns)

    4 years, 2 months ago

    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!

    Plugin Contributor Robert Wattner

    (@rwattner)

    4 years, 2 months ago

    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

    quietthunderdesigns

    (@quietthunderdesigns)

    4 years, 2 months ago

    Worked like a charm – thank you!

    Plugin Contributor Robert Wattner

    (@rwattner)

    4 years, 2 months ago

    Happy to help

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Hide logo until you scroll down’ is closed to new replies.