askdesign
12/13/2015 - 4:47 PM

How to set up Sticky Header or Navigation in Genesis

Various solutions

/* Sticky Secondary nav */

.nav-secondary.fix {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    /*background: rgba(255, 255, 255, 0.92);*/
}

.admin-bar .nav-secondary.fix {
    top: 28px;
}
// Secondary Nav
//Create a file named sticky-nav-sub.js having this code under js directory under the child theme.

//We are specifying the selector that should be stickied in line 2 of the js file.

//var $filter = $('.nav-secondary');

jQuery(document).ready(function($) {
	var $filter = $('.nav-secondary');
	var $filterSpacer = $('<div />', {
		"class": "filter-drop-spacer",
		"height": $filter.outerHeight()
	});


	if ($filter.size())
	{
		$(window).scroll(function ()
		{
			if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
			{
				$filter.before($filterSpacer);
				$filter.addClass("fix");
			}
			else if ($filter.hasClass('fix')  && $(window).scrollTop() < $filterSpacer.offset().top)
			{
				$filter.removeClass("fix");
				$filterSpacer.remove();
			}
		});
	}

});
/* where nav.nav-primary is the 
selector of whichever element is immediately below the .site-header. */

/* Sticky header */

.site-header {
    position: fixed;
    width: 100%;
    z-index: 1000;
}

nav.nav-primary {
    padding-top: 164px; /*height of header (can be easily obtained using Firebug)*/
}
I have taken the Javascript code from http://happycog.com/ by inspecting its source.

Related Links

https://gist.github.com/bgardner/5038210

http://youneedfat.com/fixed-header-wordpress/

http://wpsites.net/web-design/how-to-make-your-nav-menu-sticky/

http://wordpress.org/plugins/genesis-sticky-menu/

http://www.studiopress.com/forums/topic/sticky-navigation-in-modern-portfolio-theme/#post-21918
add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
function custom_enqueue_script() {
	wp_enqueue_script( 'sticky-nav-sub', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-nav-sub.js', array( 'jquery' ), '', true );
}
// When using the code for sticky primary or secondary navigation if you would like the effect to work only for desktop widths, 
// specify the starting width in the if conditional in .js file, like this:

if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top && window.innerWidth > 500)
/* Sticky Primary nav */

.nav-primary.fix {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    /*background: rgba(255, 255, 255, 0.92);*/
}

.admin-bar .nav-primary.fix {
    top: 28px;
}

/* Uncomment the background property line if you wish to have transparency 
for the primary navigation menu when it is stickied. */
// Primary Nav
add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
function custom_enqueue_script() {
	wp_enqueue_script( 'sticky-nav', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-nav.js', array( 'jquery' ), '', true );
}
// Create a file named sticky-nav.js having this code under js directory under the child theme.

// We are specifying the selector that should be stickied in line 2 of the js file.

// var $filter = $('.nav-primary');

jQuery(document).ready(function($) {
        var $filter = $('.nav-primary');
        var $filterSpacer = $('<div />', {
                "class": "filter-drop-spacer",
                "height": $filter.outerHeight()
        });
 
 
        if ($filter.size())
        {
                $(window).scroll(function ()
                {
                        if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
                        {
                                $filter.before($filterSpacer);
                                $filter.addClass("fix");
                        }
                        else if ($filter.hasClass('fix')  && $(window).scrollTop() < $filterSpacer.offset().top)
                        {
                                $filter.removeClass("fix");
                                $filterSpacer.remove();
                        }
                });
        }
 
});