[TheCramblerParticipant]

Hi there,

I have looked at a number of topics regarding this same problem, and can’t get anything to happen with my site using the code snippets provided in other threads. When the user is on my site when it first loads, there is a main logo image above my navbar. However, when the user scrolls down I have the sticky navbar enabled, and I would like a different logo to load up (a shorter, skinnier logo) and show on the sticky navbar, but then I want the original logo to always show when the user is scrolled all the way to the top of the page.

I have tried the following code:

(function($){
 $(window).bind('scroll', function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar .x-brand img').attr('src','http://urltomywideimage.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','http://urltomyregularimage.png');
   }
 });
})(jQuery);

This doesn’t seem to affect anything unless I’m doing something wrong. I purged my site cache and also my browser cache, and I don’t see any changes at all.

Any help would be greatly appreciated!

[JoaoModerator]

Hi There,

Add to Appereance > Customizer > Custom > JS

jQuery(function($) {
  $(window).scroll(function() {
 var scrollPos = $(window).scrollTop();
   if($(".x-navbar").hasClass("x-navbar-fixed-top") && scrollPos > 100) {
      $(".x-navbar-fixed-top .x-brand img").attr("src","http://urltomywideimage.png");
   } else {
      $(".x-navbar-fixed-top .x-brand img").attr("src","'http://urltomyregularimage-2.png");
   }
  });
});

Add to Appereance > Customizer > Custom > CSS

.x-navbar.x-navbar-fixed-top .x-brand img {
    width: auto;
    margin-top: 10px;
}

Hope it helps

Joao

[TheCramblerParticipant]

Hi,

I’m still not seeing anything change… not sure what’s going wrong. My site is http://www.startblogging101.com/ – I disabled the “Under Construction” Add-On temporarily so you guys can get access to it.

[Paul RModerator]

Hi,

Kindly change the js code to this.

 jQuery(function($) {
$('<img class="my-logo" src="http://startblogging101.com/wp-content/uploads/2016/12/Start_Blogging_101_Wide_Distressed.png">').insertBefore('.x-nav-wrap.desktop .x-nav');

	$(window).scroll(function() {
		var scrollPos = $(window).scrollTop();
		if($('.x-navbar').hasClass('x-navbar-fixed-top') && scrollPos > 100 ) {
                    $('.my-logo').show();    			
		} else {
                       $('.my-logo').hide();    
		}
	});
}); 

Then add this in Custom css.

.my-logo {
     max-width:200px;
     float:left;
}

Hope that helps

[TheCramblerParticipant]

Getting there! A couple things are wrong with that – first of all, when the page first loads, I see both the big regular circle icon along with the wide icon at the same time. However, as soon as I start scrolling even a little bit, the wide logo disappears then reappears when the sticky navbar shows. Secondly, when the sticky navbar does show with the new wide logo, and I hover over one of the links in the navbar, all the links in the navbar shift to the left. Could I ever just have the logo float left like it is, and have the navbar links float right when the sticky bar is showing?

Any way to fix those two things?

Edit: I may have fixed the first problem by adding $(.my-logo).hide(); before the scroll function. Right now, my Javascript looks like this:

jQuery(function($) {
    $('<img class="my-logo" src="http://startblogging101.com/wp-content/uploads/2016/12/Start_Blogging_101_Wide_Distressed.png">').insertBefore('.x-nav-wrap.desktop .x-nav');
    $('.my-logo').hide();

	$(window).scroll(function() {
	    var scrollPos = $(window).scrollTop();
	    if($('.x-navbar').hasClass('x-navbar-fixed-top') && scrollPos > 100 ) {
    	        $('.my-logo').show();    			
	    } else {
                $('.my-logo').hide();    
	    }
    });
});

But still need help on the second part.

Thanks!

[JadeModerator]

Hi there,

Please add this code in the customizer:

.masthead-stacked .x-navbar-fixed-top .desktop .x-nav {
    float: right;
    margin-right: 48px;
}

Hope this helps.

[TheCramblerParticipant]

That appears to be working for me, thank you so much!!

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts