Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* 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)*/
}
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 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-sub', get_bloginfo( 'stylesheet_directory' ) . '/js/sticky-nav-sub.js', array( 'jquery' ), '', true );
}
/* 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;
}
if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top && window.innerWidth > 500)
@mazurian

This comment has been minimized.

Copy link

@mazurian mazurian commented Aug 25, 2019

Hi, could you please let me know how can I make sticky navigation on mobile devices? Above code works great on desktop but want to add it to work with responsive.

Thanks,
Thomas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment