Docs

[wrocff]

Hi

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

[Paul R]

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

[wrocff]

Hi,

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)

[Paul R]

Hi,

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.

[Eduards C]

Hello, I wanted to achieve the same result, but is it possible to restore the original logo image as soon as I reach the top of the page again? With the code above it works, but once I scroll the logo changes until I refresh the page..

[Rue Nel]

Hello There,

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.

[Eduards C]

Hello, thank you for your reply! 🙂

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');
   }
 });
});

[Eduards C]

Just to make it more clear.. I want to achieve this:

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

[Rue Nel]

Hello There,

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.

[Eduards C]

Thank you so much, once again you help me a lot! Regards

[Rue Nel]

You are most welcome!

[instadesign]

Hi, thank you for this, it worked great for me, however I’ve since found the Javascript seems to fail if I turn on WordFence. I’ve turned WordFence back off for now but obviously do not want to go on sacrificing security for aesthetics! Any ideas on this? Here’s the site: http://thehiphopchipshop.com/

EDIT: I’ve just realised it’s obviously not WordFence causing the issue as I’ve turned it off and the problem has recurred, I’m also getting a couple of blocks not displaying now, but if I wait a minute or two then they show up and the alternate logo starts working again… very strange!

[Zeshan]

Hi there,

Thanks for writing in!

I’ve checked your site, it seems you are using Cloudflare with Rocket Loader. Rocket Loader may not work properly and cause conflicts with various scripts used in the theme or bundled plugins. You may refer to this post for more detail about Rocket Loader and the theme: https://community.theme.co/forums/topic/cloudflare-rocket-loader-home-page-above-masthead-slider-fail/page/2/#post-361671

Thank you!

[Author]

Posts