Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add a sticky menu to Genesis Sample child theme. Source: http://my.studiopress.com/tutorials/sticky-menu/
/* Secondary Navigation */
.nav-secondary {
background-color: #333;
display: none;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.nav-secondary .genesis-nav-menu a {
padding: 20px;
}
.nav-secondary .genesis-nav-menu .sub-menu a {
padding: 16px 20px;
}
.nav-secondary a:hover,
.nav-secondary .current-menu-item > a,
.nav-secondary .menu-item-home > a,
.nav-secondary .menu-item-home > a:hover {
color: #fff;
}
.nav-secondary .sub-menu a:hover {
color: #333;
}
<?php
//* Enqueue sticky menu script
add_action('wp_enqueue_scripts', 'sp_enqueue_script');
function sp_enqueue_script() {
wp_enqueue_script('sample-sticky-menu', get_bloginfo('stylesheet_directory') . '/js/sticky-menu.js', array('jquery'), '1.0.0');
}
//* Reposition the secondary navigation menu
remove_action('genesis_after_header', 'genesis_do_subnav');
add_action('genesis_before', 'genesis_do_subnav');
jQuery(function($) {
$(window).scroll(function() {
var yPos = ($(window).scrollTop());
if (yPos > 200) { // show sticky menu after screen has scrolled down 200px from the top
$(".nav-secondary").fadeIn(0); // change value to display sticky menu more or less faster
} else {
$(".nav-secondary").fadeOut(0);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.