Change logo when scrolled

  • Resolved gcosta88

    (@gcosta88)


    6 years, 5 months ago

    Hello and thanks for the plugin!

    I’m trying to figure out a way to replace the initial logo with a different image when the shrinking effect kicks in.

    Any help in achieving that effect would be greatly appreciated—and I’d of course suggest adding that functionality to the core plugin.

    Thanks in advance!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter gcosta88

    (@gcosta88)

    So I figured it out.

    Provided you give the logo element a CSS class (in this case, simply logo) under the “Advanced” tab, the custom CSS code for the header should look like this:

    .she-header .logo img {
    visibility: hidden;
}

.she-header .logo {
    background: url(https://your-image-path-here.png) no-repeat;
}
    Plugin Contributor Robert Wattner

    (@rwattner)

    Hi, thanks for the input. We have been planning on adding this feature once initial bugs have been worked out. Hopefully that’s very soon.
    It looks like you’ve gotten it to work for you in the mean-time though.
    If background: url(https://your-image-path-here.png) no-repeat; gives you problems you can try this: content:url(https://your-image-path-here.png) !important;
    Also, if you just want to shrink the logo I would target the width so the image will scale down properly. like this:

    .she-header .elementor-image img {
    width: 80px !important;
    content:url(https://your-image-path-here.png) !important;
}

    I hope this was helpful.

    I am having the same issue and I am not overly CSS proficient. I tried adding the exact line in my custom CSS and it doesn’t work. I want the logo to animate when you scroll. Change logo as you scroll and stick. It would be great if people who got the results would past their Url to see as an example.

    .she-header .elementor-image img {
    width: 80px !important;
    content:url(https://your-image-path-here.png) !important;
    }

    .she-header .logo {
    background: url(https://beta.toolinc.com/wp-content/uploads/2018/07/Tool-Logo_Word-Mark_SQUARE.png) no-repeat;
    }

    apollollc

    (@apollollc)

    Any update on when this will be implemented into the plugin?

    I have a doubt.

    When I scroll, the logo lose the link to website’s home.

    Would you know a way to solve this?

    Plugin Contributor Robert Wattner

    (@rwattner)

    @apollollc we have been very busy with our daily work but this is one of the first features we plan on adding when we have time to work on this.

    @paoloenryco I’ll look into this as soon as I can. Do you have a link to the site?

    yes, sure.

    https://wifilegal.com/

    i’ll really greatfull if you help me!

    @rwattner do you already have this answer to me?

    Add this code to the section:

    .she-header .elementor-image img {
    content:url(your url);
    }

    Any news when this will be added to the plugin?

    Hide logo or different logo on scroll would be perfect!

    Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Change logo when scrolled’ is closed to new replies.