Replace Site Title With Logo On Scroll

This solution enables you to remove the site title and replace it with your custom logo on scroll.

Here’s the site header showing the site title before scroll :

And here’s the site header showing the logo replacing the title on scroll :

You can see more in the following demo video.

Demo Video

Shows the site title being replaced with the custom logo on desktops using the Monochrome Pro child theme for Genesis.

Tested using the Monochrome Pro child theme by StudioPress. The CSS may need modifying for use in other Genesis child themes.

There’s 3 steps –

# Step 1 – Upload the scroll.js file to your child theme folder like this :

# 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 CSS from the style.css file to the end of your child themes style sheet and clear caching.

If you want to change the default size of the logo, there’s 2 steps.

1. Go to config > theme-supports.php and modify the values for the width and height as seen in the following screenshot :

2. Add the following CSS rule at the end of your child themes style.css file and clear caching :

.wp-custom-logo .title-area {
    height: 50px;
    width: 200px;
}

These values should match the values in your themes config > theme-supports.php file.