Docs

[chrislavc]

Hi,

I would like to have a different navbar logo when I scroll down. Also, when I come back to top, i would like to see the first logo.

Can you help me with that.

Thanks !

[chrislavc]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! We could not check your site because the given credential is incomplete. You forgot to give the username. By the way, to achieve what you have in mind, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $(window).on('load scroll', function(){
    if ( $('.x-navbar').hasClass('x-navbar-fixed-top') ) {
      $('.x-brand img').attr('src', 'http://placehold.it/120x120');
    } else {
      $('.x-brand img').attr('src', '//theme.co/media/five21.png');
    }
  });
})(jQuery);

Feel free to insert the original and replace src of the logo.

Hope this helps.

[chrislavc]

Thanks. Everything works fine but how can I resize those 2 images ?

[chrislavc]

This reply has been marked as private.

[chrislavc]

Also, when I come back at the top, I would like to see the first logo. How can I do this ?

[Nabeel A]

Hi again,

Please replace the previous code with this:

(function($){
  $(window).on('load scroll', function(){
	var headerHeight = $('.x-navbar-inner').height();
    if ($(this).scrollTop() > headerHeight) {
      $('.x-brand img').attr('src', 'http://placehold.it/120x120');
    } else {
      $('.x-brand img').attr('src', '//theme.co/media/five21.png');
    }
  });
})(jQuery);

To resize the logo you can add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar .x-brand img {
    width: 200px !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[chrislavc]

Well it seems like it doesn’t work well… There is a lag when scrolling you can see it on the page “accueil”. Also, I want the logo when scrolling to be 200px high…

Thanks for the help !

[Christopher]

Hi there,

If we force the height with CSS, logo will be stretch. you can try and add height property to following selector :

.x-navbar .x-brand img {
    height: 200px !important;
}

Hope it helps.

[Author]

Posts