Hi guys, I’d like to change the logo in the sticky menu that appear when I scroll down the page. in the homepage I a big vertical logo, I’d like to change it in the scroll bar and put an horizontal logo. is it possible? tx a lot
your help in this forum here is invaluable indeed… I really mean it.
Pete, could you please share the same script code snippet, but where both logos are stored locally among the project assets (not under some url)?
I mean basically the part, where you define the variables for the images to grab.
I might have an idea, but my javascript knowledge is quite limited (was too long ago )…
I wanted to do something like this a while back - will be great to refer back to this. I originally wanted to have this so the text was a different colour too, but the logo change is great.
Unfortunately at present, if the image is not being used in Blocs it doesn’t export it. Sometimes what I will do is create a temporary page with the image(s) and I will be able to link to it eg… “img/myimage.jpg”.
Or I just upload the image to my server and link to it.
The other option is to make a Custom Bric for this, which I can probably do at some stage. That way its all just set in the side panel.
@PeteSharp maybe it’s a stupid question, but I’m new so I’m asking you anyway. when I view this website I’m workin on http://classyday.xyz/memorabilia/ in a large window everything is ok, but if I narrow the browser or if I view the site from a smartphone, the vase on the right disappears and I can’t see it anymore. how do i pin the background image on the right so that it is always visible?
tx
For those who might need it: here is a small follow-up about my question of logo change on scroll here. All kudos go to @PeteSharp. It is his solution and his script!
I just want to add how to create same result, where both logos are local assets of your choice and not url (it was basically my question to @PeteSharp above).
So here is how I did it:
Create a hidden Page in Blocs and place the logo images there:
In my example:
First image is named: Logo1.png
Second image is named: Logo2.png
Check the Screenshot below.
Then adjust the above JavaScript (as @PeteSharp suggests) in the project page or project footer (project footer in my case) as follows:
<script>
var logoOne =‘/img/Logo1.png’ var logoTwo =‘/img/Logo2.png’ var scrollDistance =‘30’
Thank you for this tutorial.
I would like the original logo in 100 px size to be replaced by the same logo in 70 px size. Do I need to use this script or is there another method (class). A little help please. Thanks