YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar rick.stoffiere asked

Reduce logo size on page scroll

Is there a way, in Pro, to display a larger logo at the top of pages, but reduce it down on page scroll?

  • Joomla
  • General Question
  • YOOtheme Pro

2 Answers

1

Avatar thomas.p Support answered

Hi rick.stoffiere,

only with custom JS which is a bit difficult as you can have two logos - inverse and the normal one.

This script worked on my test site where I only use the inverse logo and a static navbar.

jQuery(function () {      
      jQuery('.uk-logo-inverse').data('size','big');      
});      

jQuery(window).scroll(function(){      
  if(jQuery(document).scrollTop() > 0)      
{      
    if(jQuery('.uk-logo-inverse').data('size') == 'big')      
    {      
        jQuery('.uk-logo-inverse').data('size','small');      
        jQuery('.uk-logo-inverse').stop().animate({      
            height:'10px'      
        },100);      
    }      
}      
else      
  {      
    if(jQuery('.uk-logo-inverse').data('size') == 'small')      
      {      
        jQuery('.uk-logo-inverse').data('size','big');      
        jQuery('.uk-logo-inverse').stop().animate({      
            height:'20px'      
        },100);      
      }        
  }      
}); 

For further assistance it would be nice to have a page to inspect and admin access.

Kind regards
Thomas

0

Avatar rick.stoffiere answered

Thank you thomas.p, that should work perfectly!!!! Fantastic support, as usual! :)

Rick

Know someone who can answer? Share a link to this question via email or twitter.