Website Guider

The Ultimate Resource for WPadmins and Geeks

How To Create an On Scroll Header in Genesis

The design patterns change, so we should be able to customize our genesis theme.

If you want to create a fixed/sticky header on a scroll or want to create the header which on scroll changes the background color, you are at right place.

Today, in this short tutorial, we are going to learn how to create a sticky header in genesis parent/ child theme.

Create On Scroll Fixed/Sticky Header

The focus of our tutorial will be on JQuery and the code applies to the home page only. The jquery snippet isn’t too much longer, but a few lines of code. Let’s get started.

Step #1: First, we will create a file at the current themes js folder. If your theme doesn’t have a js folder, create one.

Inside js folder, you need to create a file named as onscroll.js. Inside it paste the following code.

jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(document).scrollTop() > 150) {
$('.home .site-header').addClass('shrink')
} else {
$('.home .site-header').removeClass('shrink')
}
})
})
If you want to set the header fixed throughout the website, then remove .home from above code. The code will look like this.
jQuery(document).ready(function($) { 

$(window).scroll(function() { 

if ($(document).scrollTop() > 150) { 

$('.site-header').addClass('shrink') 

} else { 

$('.site-header').removeClass('shrink') 

}

 }) 

})

Step #2: Now we will add some CSS and header will begin to scroll and its color will change. Inside your theme, find style.css and add this snippet.

header.site-header.shrink {
background-color: white;
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-name: slidedown;
animation-name: slidedown;
-webkit-animation-timing-function: cubic-bezier(.075,.82,.165,1);
animation-timing-function: cubic-bezier(.075,.82,.165,1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
padding: 0;
box-shadow: 0 2px 6px 0 rgba(0,0,0,.07);
background: #fff;
}
.home .site-header.shrink .genesis-nav-menu a {
color: black;
}
@media only screen and (max-width: 768px) {
.site-header.shrink {
display : none;
}
}

Above CSS code changes the header style. The position of header changes to fixed. Also, its background changes from transparent to white. I have added some animations to it.

If you applied the jquery to all website, as mentioned, then remove .home from CSS and code will look like .site-header .shrink .genesis-nav-menu a

Step #3: The last step is enqueueing a script on scroll.js. Navigate to the functions.php file add this code.

function websiteguider_script() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/onscroll.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'websiteguider_script' );
Note: If you are applying this code to Genesis parent theme, then change get_stylesheet_directory_uri to get_template_directory_uri. Also, change the path js/onscroll.js to the path where the file is located.

Now you have a scrolling header which changes its background color when scrolled.

Hope you loved this tutorial, if so please like, share and subscribe to our youtube channel.

Also, don’t forget to leave the suggestion.

Raashid Din Dar

Raashid Din Dar is a web developer and designer. He specialises in WordPress Theme and Plugin development. Also, Web Designing is what he loves.He loves to read books and play with friends.

2 thoughts on “How To Create an On Scroll Header in Genesis

Leave a Reply

Your email address will not be published.

Back to top