Change Logo Size On Scroll

This solution enables you to change your logo size on scroll on desktops only. When mobile ( less than 960px width ), a smaller version of your logo will display.

Desktop logo size before scroll

Desktop logo size before scroll

Mobile logo size ( Less than 960px width )

Demo Video #

Shows the default logo size displayed before scroll on screen widths above 960px and the smaller logo on scroll and on screen widths less than 960px width.

Tested using the latest version of Genesis and the Genesis Sample child theme by StudioPress.

Installation – Support Included #

There’s 3 steps :

Step 1 – Upload the shrink-scroll.js file to your child themes root directory.

Step 2 – Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.

Step 3 – Copy & paste the following CSS to the end of your child themes style.css file and clear caching.

Related Tutorials

• 3 Ways To Change Logo On Scroll Using jQuery In Genesis Sample Theme