Skip to content

Instantly share code, notes, and snippets.

@srikat

srikat/gist:7867185

Created December 9, 2013 03:54
Show Gist options
  • Save srikat/7867185 to your computer and use it in GitHub Desktop.
Save srikat/7867185 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.css
/* 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)*/
}
Raw
gistfile2.php
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 );
}
Raw
gistfile3.css
/* 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;
}
Raw
gistfile4.php
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 );
}
Raw
gistfile5.css
/* 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;
}
Raw
gistfile6.js
if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top && window.innerWidth > 500)
@mazurian
Copy link

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