
Want to make Genesis header color change on scroll and shrink the size? here’s I share how to do it. It’s not that complicated, what you need to do is just play some trick with jQuery and CSS code. The inspiration how I found the way how to crack the code is from Genesis child them I use for this site which is Digital Pro. And find a way how to implement it and make it work on Genesis samples.
The result is surprisingly good. I mean my other site that also uses this code w
Before you start grabbing the code to your site you can check how it works on the other blog that I dedicated for my Artwork. Please check here.
If that effect is what you wanted then let’s find out how I did make Genesis header/ nav menu color change on scroll. And shrink the size as well.
Adding custom js to make Genesis header color change on scroll
First thing first, you need to upload a custom js code to your Genesis sample theme root directory on your cPanel.
Create a file using note pad or text editor if you are running a Mac computer. Then name it shrink.js
Note! make sure you change the format to plain text if you are using macOS TextEditor.
Copy and paste the code below, and save it. Next, upload it to root directory folder in your cPanel > public_html > Your domain > WP Content > Themes > Genesis Sample > js.
Another easy way is by creating the file directly inside cPanel. To do it;
Inside js folder click on +File the left top on your cPanel navigation. Then name it shrink.js.
Once the file created, right click on it and select edit. And copy and then paste the code below.
(function($) { // Make sure JS class is added. document.documentElement.className = "js"; // Run on page scroll. $(window).scroll( function() { // Toggle header class after threshold point. if ( $(document).scrollTop() > 50 ) { $(".site-header").addClass("shrink"); } else { $(".site-header").removeClass("shrink"); } }); })(jQuery);
Next step is adding a PHP code to enqueue the shrink.js to Genesis sample and make the header color change on scroll works.
Adding PHP code to Genesis Sample Theme Function (function.php)
To make it work and do not
See the screenshot below for example;
Okay! below is the PHP code:
wp_enqueue_script( 'genesis_responsive_menu', get_stylesheet_directory_uri() . '/js/shrink.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
Last steps, is by doing tweak your Genesis Header CSS.
CSS Code to make Genesis Header color change and shrink on page scroll
This is the final steps to make it works and will WOW your visitor 🙂
Copy and paste the CSS code below and place it to WordPress Built-in CSS editor in WP Customizer.
/* Site Header ------------------------------------------------------------*/ .site-header { background-color: transparent; padding: 3px 30px; box-shadow: 0 1px 13px rgba(0,0,0,0.01); } .site-header.shrink { background-color: #fff; padding: 0 30px; z-index: 9999; box-shadow: 0 1px 13px 0 rgba(0,0,0,0.05); } .site-header a { color: #999; z-index: 9999; } .site-header.shrink a { color: #333; } .site-header.shrink a:hover { color: #c49f79; } .admin-bar .site-header { top: 32px; }
Please change the background-color and the color to match with your site design.
Above code is just a sample from my other blog. Just be creative with the CSS 🙂
Conclusion
That’s how I make Genesis color change on scroll and shrink the header height size.
Pretty simple eh?
That’s why I really love using the
And the cool thing’s about Genesis Framework it is GPL. So you can use it on any site’s that you have as
If you are into web developing based on WordPress. Or just love messing around with code. I am sure also will fall in love as I do.
For other CSS trick sample using this method. You can check it on my other blog here.
Thanks for stopping by. Hope you found this post useful.
Cheers!
Hi Hermansyah,
Thanks a lot for your explanation about the Genesis header shrink – scroll, this was just what I was looking for. It works great!
Bye!
Petri
Hi Petri,
You’re welcome 🙂
Hi Hermansyah,
This is excellent, thank you so much.
Just a quick question – I want to swap out my logo on scroll – do you have suggestion for how I can do this?
Many thanks,
Matt.
Hi Matt,
You’re welcome!
You can use CSS to do that, just like I did on my other blog. The idea is something like this:
Please match the code with your site design, you’ve got the idea 🙂