Add wrapper to fix for broken mobile menu in Genesis

In attempting to use this plugin with the Genesis sample child theme, I was running into an issue where the mobile menu wouldn’t work even with the “Do not stick element when screen smaller than:” set properly.

The issue is due to the markup formatting, thus a change was required. I’m posting here in case anyone else has the issue in the future.

This plugin requires a single element to stick; however the genesis markup for the mobile menu puts the <button> element that triggers the menu outside of the nav-primary. The solution was to wrap both the button.menu-toggle and the div.nav-primary with wrapper.

Place the following in the functions.php

//* add wrapper on primary navigation for sticky support
add_filter( 'genesis_do_nav', 'sticky_nav_wrapper', 10, 3 );
function sticky_nav_wrapper( $nav_output ) {

    return '<div class="sticky-nav-wrapper">' . $nav_output . '</div>';

}

and use .sticky-nav-wrapper as the sticky element in the plugin.

Hope that helps someone!