I have a fixed top header on my site (URL: http://wrocff.vot.pl) and I am wondering if it is possible to change the logo when scrolling down the site? I want to keep only circle symbol (without name) after scrolling (it could be in other file).

Besides changing the logo when scrolling, I want the header to be a bit lower.

Is there any chance to help me with this case?

Thank you
Wiktor

Thanks for writing in!

To achieve that, you can add this under Custom > Javascript in the Customizer.

jQuery(function($) {
    $('.x-navbar-fixed-top .x-brand img').attr('src','http://www.wrocff.vot.pl/wp-content/uploads/2015/01/logowrocff.png');
});

Change http://www.wrocff.vot.pl/wp-content/uploads/2015/01/logowrocff.png with your circle image.

To reduce height of header on scroll, you can add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
     height: 100px;
     padding-top: 40px;
}

Change 100px and 40px to achieve your desired height.

Hope that helps.

this javascript code doesn’t work, logo doesn’t change after replacing link to file (new image: http://www.wrocff.vot.pl/wp-content/uploads/2015/01/logosymbol.png)

Hope you will find another way to help me (or I just doing something wrong)

Sorry about that, please replace the javascript code with this.

jQuery(function($) {
$(window).scroll(function() {
       if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
               $('.x-navbar-fixed-top .x-brand img').attr('src','http://www.wrocff.vot.pl/wp-content/uploads/2015/01/logosymbol.png');
       }
});

});

Hope that helps.

Thanks for updating this thread!

To have the same effect but switches back to the original logo once you scroll up, please add the following JS code instead in the customizer, Appearance > Customize > Custom > Javascript

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','http://placehold.it/120?text=Secondary+Logo!');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://placehold.it/120?text=Original+Logo!');
   }
 });
});

We’d love to know if this works out for you.

I have inserted the code, but it still doesn’t change back to the original logo once I scroll down, I have other function above this one maybe that would be the problem?

My code is like this in the costumizer

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 0) {
			$('.x-navbar-fixed-top').css("background-color", "#fff");
		} else {
			$('.x-navbar-fixed-top').css("background-color", "transparent");
		}
	});
});

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','http://aiesec.dk/wp-content/uploads/2015/06/logo_black.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://aiesec.dk/wp-content/uploads/2015/06/logo.png');
   }
 });
});

So when the scroll is all up to the page, the logo stays black, and when it scrolls changes to blue like this:

And if I refresh the page or simple go to aiesec.dk the logo is still blue, if I scroll changes to black and it stays black until I refresh or go to another page..

Please check your customizer setting if you already added your logo or not. Maybe you are just using logo text yet. We could not give you a precise solution, would you mind providing us access to your site because it is under construction mode.

For the meantime, please use this code instead:

(function($){
 $(window).bind('scroll', function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar .x-brand img').attr('src','http://aiesec.dk/wp-content/uploads/2015/06/logo_black.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://aiesec.dk/wp-content/uploads/2015/06/logo.png');
   }
 });
})(jQuery);

For the background color of your navbar, you can use this custom css in your customizer, Appearance > Customize > Custom > CSS

.x-navbar {
  background-color: transparent;
}

.x-navbar.x-navbar-fixed-top {
  background-color: transparent;
}

As an alternative with your own code, you can simply have it this way:

jQuery(document).ready(function($){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
      $('.x-navbar-fixed-top').css("background-color", "#fff");
      $('.x-navbar-fixed-top .x-brand img').attr('src','http://aiesec.dk/wp-content/uploads/2015/06/logo_black.png');
    } else {
      $('.x-navbar-fixed-top').css("background-color", "transparent");
      $('.x-navbar .x-brand img').attr('src','http://aiesec.dk/wp-content/uploads/2015/06/logo.png');
    }
  });
});

Hope this helps.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thank you for your understanding.