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.
Leave a Reply
You must be logged in to post a comment.