Different logos for main header and sticky header

[Jacqui]

Hi,

I’m trying to get a separate header for the sticky header and I’m using code I found from an older thread. I set my fixed header to have a transparent background so now when the sticky logo appears, the main logo remains there.

How can I make the main logo disappear when the sticky logo appears? Here’s the code I used:

jQuery(function($) {
$('<img class="my-logo" src="http://localhost/xthemes/wordpress/wp-content/uploads/2018/02/U.svg">').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();    
    }
});

});

Unfortunately I’m working on a local server so I can’t provide you with a working link.

[Joao]

Hi There,

If you want to use a different logo on scrolling you can try the following JS on Theme Options > JS

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

Note that the most recommendable would be to upgrade your X Theme to Pro which offers a header builder and you would be able to create totally independet bars and have a second bar sticky which could be set to be displayed after scrolling.

That would allow you to build really good headers code free.

Hope it helps

[Jacqui]

Hi,

Thanks for the code but it works the same way as the previous code. It changes the logo when I scroll down the page but when I scroll back up the page, the logo doesn’t change back to the main logo.

[christopher]

Hi there

This is getting very hard for us to determin why the code is not working for you as we do not have access to your website. Kindly move your website to a live server and give us the URL to be able to check the code against your website and to be able to use the Google Chrome Developer toolbar to fix the code if needed for you.

Thank you for your understanding.