Genesis Tutorials

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 :

Site Title Before Scroll

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

Logo replacing site 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.

Installation Steps

There’s 3 steps –

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

Step 1 Upload scroll.js file

# Step 2 – Copy & paste the PHP code from the functions.php file to the end of your child themes functions file.

Step 2 Add PHP code to 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.

Step 3 Add CSS to style sheet

Download Folder

Change Logo Size

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 :

Theme Supports File

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.

Leave a Reply

Your email address will not be published. Required fields are marked *