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(http://your-image-path-here.png) no-repeat;
}
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(http://your-image-path-here.png) no-repeat; gives you problems you can try this: content:url(http://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(http://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(http://your-image-path-here.png) !important;
}
.she-header .logo {
background: url(http://beta.toolinc.com/wp-content/uploads/2018/07/Tool-Logo_Word-Mark_SQUARE.png) no-repeat;
}
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?
@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!
