Find out in this tutorial how to make Genesis Sample header to change color when the user scrolls down using code.
Would you like the header to change color when the user scrolls down?
In this animation you will understand better what I mean:
Interested? Here’s how to introduce this effect in the Genesis Sample (3.4) child theme.
Steps to make the header change color when scrolling down in Genesis Sample
1. Create a file scroll-header.js
Insert this snippet into a new file called scroll-header.js inside the /lib/ folder:
To see this and another 847 code snippets of this website, login or subscribe here.
This script is responsible for adding the CSS change-color class on scroll, so you can customize the layout to your liking.
2. Modify the functions.php file
Now, paste the following block at the end of the functions.php file:
To see this and another 847 code snippets of this website, login or subscribe here.
With these lines you get the theme to load the scroll-header.js file.
3. Edit the style.css file
Finally, insert the following code at the end of style.css:
To see this and another 847 code snippets of this website, login or subscribe here.
With this last step, you’re applying the styles so that the header changes color when you scroll down. In this case, you’re applying Genesis Sample’s signature blue, but you can replace it with whatever you want.
In addition, you also change the color of the website title and menu items to white for better contrast.
And don’t forget the burger menu for mobile devices. 😉
3.1. Alternative
If you prefer, you can place the first part of the code (up to the media queries) in the Site Header section and the rest after the media queries.
What’s the advantage of inserting it all at the end?
If the child theme is updated, it’s easier to copy the snippet and paste it back into the new version.
So, depending on the project (your own or for a client), you’ll want to make these changes in one way or another. Your pick. 😉
Conclusions
Now you know how to get the header to change color when scrolling in Genesis Sample.
You can also get the same effect in any other Genesis or WordPress child theme by making small modifications.
Any questions? Let me know in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
