• 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 On Scroll

This tutorial provides the code which enables you to switch logos on scroll in any Genesis child theme. Tested on the Genesis Sample child theme and may need tweaking on other themes.

The code also creates a fixed header and overlaps the image over the bottom edge of the site header.

Here’s the demo video

There’s 4 simple steps to follow:

  1. Using a code editor, copy & paste PHP code to the end of your child themes functions .php file.
  2. Using a code editor, create a new file named scroll-logo.js in your child themes js folder. Create a js folder if your child themes doesn’t already include one.
  3. Add CSS to your child themes style.css file
  4. Upload 2 logos to your child themes images folder making sure both file names and extensions match whats in the PHP code.

Installation Instructions

Register for full access

Related Tutorials

  • 3 Ways To Change Logo On Scroll Using jQuery In Genesis Sample Theme
  • Adding Shrink Title Effect In Genesis Header
  • Display Logo on Scroll
  • Change Logo When Genesis Responsive Menu Toggled

jQuery Scroll

Reader Interactions

Comments

  1. Sara Whitford says

    June 25, 2019 at 10:02 am

    I’m using this as well as the script for changing the background color on scroll, but the change of the image seems jumpy. At one point it seems like the larger version and the smaller version of the image are both showing up at the same time. I was wondering if there is a way to do this without using two images, but rather using the same image but just shrinking the size. Perhaps you already have a tutorial for that? Here is the page in question:

    https://macdaddysnc.com/

    Thank you!

    Log in to Reply
    • Brad Dalton says

      June 25, 2019 at 8:45 pm

      What size are your images and what theme are you using?

      Log in to Reply
    • Brad Dalton says

      June 26, 2019 at 10:57 pm

      New tutorial https://wpsites.net/web-design/change-logo-size-on-scroll/

      Log in to Reply

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