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