Sticky-nav Logo

[chicuelo]

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

Envio de SMS Masivos Personalizados - Marketing Movil por SMS

[PeteSharp]

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.

[chicuelo]

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

[PeteSharp]

@chicuelo

And this one is Jquery

Other way around

@chicuelo

Also tried this one and no luck.

Thats also using jquery.

[PeteSharp]

@chicuelo

<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>

This converted to pure javascript would look something like this…

var logoOne = document.querySelector('.navbar-brand img').getAttribute('src');
var logoTwo = 'img/smedia-logo.svg';
var scrollDistance = 30;

window.addEventListener('scroll', function() {
    if (window.scrollY < scrollDistance) {
        document.querySelector('.navbar-brand img').setAttribute('src', logoOne);
    }
    if (window.scrollY > scrollDistance) {
        document.querySelector('.navbar-brand img').setAttribute('src', logoTwo);
    }
});

When I made this example up I used variables, so it’s easier for people to make adjustments for their project.

[chicuelo]

Now this is working fine! Thanks. And I managed to get working the other Javascript code by adding img after the class. Thank you so much Pete. Now I have another problem, which one should I use hahahah. Thanks again

[PeteSharp]

Either way, My one just grabs the first logo url automatically.