Replace Genesis Sample responsive menu with ShiftNav plugin.
I recently redeveloped a client site where they requested a slide in menu on mobile rather than the typical expanding menu. I first tried Slideout.js but I had some styling and behaviour issues with it and switched to ShiftNav, a plugin that I had used many years ago.
I shall revisit it again in the future. I have written about using Slideout.js with Genesis Sample.
After installing ShiftNav you need to assign a menu to it – the one that will show when the menu slides in – and (optionally) disable showing the site title in the menu panel (because it looks a little silly).
In the Toggle Bar settings page, uncheck Disable Toggle Bar so that nothing is displayed on desktop. Genesis Sample hides the menu below 960px so set that as the Toggle Breakpoint. Setting Hide Theme Menu to .nav-primary will hide the menu when Toggle Breakpoint is reached.
Dequeuing responsive-menus and adding toggle
The code dequeues the responsive-menus script only if ShiftNav is active.
The ShiftNav menu toggle code is copied from the Custom Toggle Integration Code section in the Main ShiftNav Settings page. To benefit from the toggle styling already in Genesis Sample I have added the ‘menu-toggle‘ class.
The menu toggle may need some CSS to remove the link underline and to change the colours.
This screenshot shows the ShiftNav menu panel when it slides in. The “Standard Dark” skin is active.