Updated on February 15, 2018
Continuing the series on off-canvas side menu in Genesis, Altitude Pro, Brunch Pro and Foodie Pro today I write about using Slideout.js for sliding in the navigation menu in Header Right widget area when the hamburger menu icon is tapped on smaller screens in Sixteen Nine Pro.
Screenshot:
Screencast:
Tested in Sixteen Nine 3.1.1
Step 1
a) Upload slideout.min.js to sixteen-nine-pro/js directory.
b) Create a file named say, slideout-init.js in the same location having the following:
I noticed one small bug, when returning from mobile view to full window view on a computer the standard menu does not reappear. Everything else works perfectly for me so I’m thinking it might be a bug? The url is: http://traveltopspot.com/
Thank you for the awesome tutorial!
Thanks for bringing this to my attention.
I’ve updated the code to fix it.
Here are the changes you need to do:
1) Replace the entire code in slideout-init.js with the one in the updated tutorial above.
2) Undo this step from the older version of the tutorial: https://d.pr/i/DlUBfw
3) Implement step 3b from the updated tutorial.
Just discovered a problem with the updated solution.
Sub menus are not opening in the side menu. Looking into it..
Hi Sridhar, sorry to bother you again, any updates on this tutorial?
Just updated the tutorial to fix the problem.
Changes are in functions.php and slideout-init.js (Steps 1 and 2).
On Agency Pro, this breaks the backstretch style on my pages. Any workaround for Agency?