Make Genesis Header Color Change On Scroll

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 ws perform better in loading speed.

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 your WP Admin page. Put the PHP code below inside the function genesis_sample_enqueue_scripts_styles() { *The code should be placed inside this hook* }

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 Framework. You can do anything with it once you buy it.

And the cool thing’s about Genesis Framework it is GPL. So you can use it on any site’s that you have as s you like.

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!