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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems