In this tutorial I share the code for setting up a sticky Primary navigation below as users scroll past it. We are going to use Sticky-Kit jQuery script to make the nav fixed on non-handhelds and use code from Beautiful Pro for the hamburger menu.
Set up: Genesis Sample is the active theme with menus assigned to Primary and Secondary Navigation locations.
We are going to reposition the secondary navigation so it appears above the header. Primary navigation is below the header.
After scrolling down:
With Primary nav menu expanded:
Upload jquery.sticky-kit.min.js to child theme's
js (create if not existing) directory.
We are going to set the sticky behavior for Primary navigation only on desktops, not on tablets and mobiles. As such create a file named say, non-handhelds.js in child theme's
js directory having the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.