katstar01
8/17/2015 - 7:13 PM

How to set up Sticky Header or Navigation in Genesis

How to set up Sticky Header or Navigation in Genesis

if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top && window.innerWidth > 500)
/* 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;
}
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 );
}
/* 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;
}
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 );
}
/* 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)*/
}