• Get application security done the right way! Detect, Protect, Monitor, Accelerate, and more…
  • Procedure to implement smart sticky header in WordPress Genesis

    Sticky header is a great way to let visitors navigate through your site when on mid of the page or post. It helps the readers to go to the header menu for further browsing.

    But there is one problem.

    Sticky header always shows on screen when you scroll down. Which is ok but if browsing on a small device then it would be disturbing the readability.

    So what’s the solution?

    A smart header – hide when you scroll down but show immediately when trying to scroll up. Sounds cool?

    I’ve tested this in the Authority Pro theme. Take a backup of an existing file so you can restore it if something goes wrong.

    Add the following in functions.php file

    //* Smart Header Functions
    function geekflare_header_sticky_script()
    		// Hide Header on Scroll Down but Show when Scroll Up
    		var didScroll;
    		var lastScrollTop = 0;
    		var delta = 5;
    		var navbarHeight = '';
    		jQuery(window).load( function() {
    			navbarHeight = jQuery('header.site-header').outerHeight();
    			didScroll = true;
    		setInterval(function() {
    			if (didScroll) {
    				didScroll = false;
    		}, 250);
    		function geekflare_hasScrolled() 
    			var st = jQuery(this).scrollTop();
    			// Make sure to scroll more than delta
    			if(Math.abs(lastScrollTop - st) <= delta)
    			// If scrolled down and are past the navbar
    			// This is necessary so you never see what is "behind" the navbar.
    			if (st > lastScrollTop && st > navbarHeight){
    				// Scroll Down
    			} else {
    				// Scroll Up
    				if(st + jQuery(window).height() < jQuery(document).height()) {
    			if (st < 15){
    			lastScrollTop = st;

    And, the below in style.css file

    /* Smart Header */
    header.site-header {
            position: fixed;
            top: 0;
            transition: top 0.3s ease-in-out;
            width: 100%;
            z-index: 9;
            left: 0;
            right: 0;
    header.site-header.shadow {
            -webkit-box-shadow: 0 0 50px rgba(0,0,0,.15);
            box-shadow: 0 0 50px rgba(0,0,0,.15);
    body.admin-bar header.site-header{
            top: 32px;
    @media only screen and (max-width: 780px) 
            body.admin-bar header.site-header{
                    top: 46px;

    Refresh the page to see the result. Don’t forget to clear the cache if any.

    Do you like this little optimization?