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. Desktop view: After scrolling down: Mobile view: With Primary nav menu expanded:
Step 1Upload jquery.sticky-kit.min.js to child theme's
js(create if not existing) directory.
Step 2We 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
jsdirectory having the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.