• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

Desktop logo size before scroll

Desktop logo size after scroll

Mobile logo size ( Less than 960px width )

Mobile logo size

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.

Register for full access

Related Tutorials

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

Custom Logo jQuery Scroll

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.