Sticky-nav Logo

How is it possible to change the logo when scrolling down on sticky nav bar?

Hey @Alessio_lupatelli,

Welcome to the Blocs Forum.

You can do this with a bit of JavaScript in the page footer

Change the 3 Var’s to suit. Change the URL for logoTwo and set how far you want to scroll before they change. It is in pixels.

EDIT: Made it so the first logo is what ever you set in Blocs.

var logoOne = $('.navbar-brand').find('img').attr('src');
var logoTwo = ''
var scrollDistance = '200'

window.addEventListener('scroll', function() {
       if ($(this).scrollTop() < scrollDistance) { 
          $('.navbar-brand img').attr('src',logoOne);
        if ($(this).scrollTop() > scrollDistance) { 
           $('.navbar-brand img').attr('src',logoTwo);

Ty, it works perfectly :ok_hand:t3:


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