• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Change header color when scrolling in Genesis Sample

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:

cambiar color cabecera hacer scroll Genesis Sample

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. ๐Ÿ˜‰

CSS Genesis Framework Genesis Sample Header Javascript PHP

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice ยท Privacy Policy ยท Cookie Policy ยท Terms and conditions
Copyright © 2023

Lost your password?