Below is the PHP code to add a sticky menu to the Genesis Sample child theme.
<?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'); |
Below is the JS code to add a sticky menu to the Genesis Sample child theme.
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); | |
} | |
}); | |
}); |
Below is the CSS code to add a sticky menu to the Genesis Sample child theme.
/* 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; | |
} |