Logo shrink working on scroll to top but not on page load

[ChrisDeBruyne]

Hi there

I’ve implemented custom CSS and JS on to a site as per support on a previous topic, and while the logo shrinks on scroll and grows bigger once you scroll to top, it’s not big to begin with when the website loads.

Any idea on how the JS or CSS can be tweaked so that the nav logo is big when the page loads too?
Site is https://mmtaxacc.co.za/.

Thanks,

[ruenel]

Hello @Chris,

Thanks for writing in!

Please be informed that your JS code will only be applied when you scroll the page.

jQuery(function($) {
	$(window).scroll(function(){
        if($(window).scrollTop() > 0){
        	$('.x-navbar').removeClass('scroll-nav');
        } else {
        	$('.x-navbar').addClass('scroll-nav');
        }
    });
});

If you want to include on page load, you will have to indicate it in your code as well. Perhaps you need to update the code and use this instead:

jQuery(function($) {
  $(window).on('load scroll', function(){
        if($(window).scrollTop() > 0){
          $('.x-navbar').removeClass('scroll-nav');
        } else {
          $('.x-navbar').addClass('scroll-nav');
        }
    });
});

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.

[ChrisDeBruyne]

That worked perfectly, thank you!

[jade]

You’re most welcome, Chris.