Great,
If you do have any issues, you might need to change var logoOne to a URL, like logoTwo.
Ok thank you for the advice…I’ll keep it in mind.
All the best
@PeteSharp I am trying to achieve this while you scroll, but I can´t understand how it calls the second image, It uses a real URL or that´s blocs nlibrary? I have to set the name of the asset and the extension?
Thank you!
Hi @chicuelo,
The logoTwo variable has the url for the second image. I was grabbing the existing logo url with logoOne.
This was using JQuery also. So if you’re using Bootstrap 5 it will need to be rewritten in pure JavaScript.
I am using B4, but how do I link the desired logo? In my case my second logo is “logo-color.svg”, I should upload to a server and place that url (example: myurl.com/logo-color.svg)? Or it gets from the library? should I use the name of the file or another variable? In your example your url is https://via.placeholder.com/60 (Can´t understand what 60 points to)
1 Like
This old post helped. It has a good breakdown and pictures.
I did see this, but not sure how relevant ant it is today.
https://laracasts.com/discuss/channels/javascript/bootstrap-navbar-changing-logo-on-scroll
1 Like
I was looking that post, but have no results. Maybe i am using svg format and it doesn´t work (I have exported and saved the logo on the img file so it could be readed)
@chicuelo upload second image. On preview Boocs doesn’t know your using the image and doesn’t include it.
For testing you can throw the image somewhere and blocs will include it.
1 Like
Thank you Pete, I finally used a code from this source and its working great (I placed and hided the second logo to avoid exporting and copying the image over and over)
https://laracasts.com/discuss/channels/javascript/bootstrap-navbar-changing-logo-on-scroll
Maybe you had a typo in the other one. It’s much the same 
The script I used was much more clear to understand for me so I could properly match the assets. I am still figuring what /60 was pointing to on the first script 
.
That’s a URL for placeholder images 
You replace that link with your one.
1 Like
Hi guys, Im having an issue with blocs 5 and B5.
I had a site (built in B4, then migrated to B5), with this code and its working fine, but when I try to replicate the same on a fresh Blocs 5 project it does not works. I created the clas nav-brand-img and applied to the logo, placed the secondary logo and hided, tested and nothing happens.
Placed on the footer area
<script>
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() < 3) {
$('.nav-brand-img img').attr('src','img/devrank-logo.svg');
}
if ($(this).scrollTop() > 3) {
$('.nav-brand-img img').attr('src','img/devrank-logo.svg');
}
})
});
</script>
Also tried the code Pete shared before but It won´t work either for me.
Here I share a video showing one site working and the other not working but the same settings:
Anyone can see whats wrong?
Thanks!
Working fine
Not working
Since you have added the class to the image you don’t need “.nav-brand-img img” just “.nav-brand-img”
Also, here is a pure javascript version of the code your using (with the selector change), no need for jQuery these days.
document.addEventListener('DOMContentLoaded', function () {
window.addEventListener('scroll', function () {
if (window.scrollY < 3) {
document.querySelector('.nav-brand-img').setAttribute('src', 'img/devrank-logo.svg');
}
if (window.scrollY > 3) {
document.querySelector('.nav-brand-img').setAttribute('src', 'img/devrank-logo.svg');
}
});
});
1 Like
Thank you so much Pete, but it does not works either. Don’t know why. I have tried deleting the assets, renaming and placing new ones. But the same result. I also disabled lazy loading (useless because both assets are loaded at launch). What I have tried is setting the scroll trigger to 800 px and that was ignored too.
What can be happening?
What errors do you get in the browser inspector
Just this
But what I notice is that on this site blocs sets navbar-brand class before the nav-brand-img class.
On the other site I have working that is not happening
Here is the site uploadaded if you want to watch.
Thank you very much
Oh right,
Your jquery is throwing an error. Thats because you are not running jquery. Bootstrap 5 has removed it. You can still include it in project settings with blocs, but its better without it.
If you use the javascript code I gave you it should work fine.
Sorry my ignorance, but I assume this code is javascript (first one I used)
<script>
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() < 30) {
$('.nav-brand-img').attr('src','img/smedia-logo-white.svg');
}
if ($(this).scrollTop() > 30) {
$('.nav-brand-img').attr('src','img/smedia-logo.svg');
}
})
});
</script>
And this one is Jquery
<script>
document.addEventListener('DOMContentLoaded', function () {
window.addEventListener('scroll', function () {
if (window.scrollY < 30) {
document.querySelector('.nav-brand-img').setAttribute('src', 'img/smedia-logo-white.svg');
}
if (window.scrollY > 30) {
document.querySelector('.nav-brand-img').setAttribute('src', 'img/smedia-logo.svg');
}
});
});
</script>
If I am right, I can not get working any of them, but one of this should work instead.
Also tried this one and no luck.
<script>
var logoOne = $('.navbar-brand').find('img').attr('src');
var logoTwo = 'img/smedia-logo.svg'
var scrollDistance = '30'
window.addEventListener('scroll', function() {
if ($(this).scrollTop() < scrollDistance) {
$('.navbar-brand img').attr('src',logoOne);
}
if ($(this).scrollTop() > scrollDistance) {
$('.navbar-brand img').attr('src',logoTwo);
}
})
</script>
I am very confused