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();
}
});
}
});