In the comments section of Responsive menu inside an off-canvas side menu using Slideout.js in Genesis, a user asked:
Looks great Sridhar! Would love to use this on a new project. I’m using Altitude Pro as my base theme and I can’t get it to work. Any tips?
In this article, I share the steps to set up Slideout.js in Altitude Pro.
From screen widths of 800px and below, when the hamburger menu icon is clicked/tapped we shall relocate the nav menu to an off-canvas panel and make it slide from the left to right.
Tested in and written for Altitude Pro 1.1.3.
Step 1
Upload slideout.min.js to child theme's js directory.
Create a file named say, slideout-init.js in the same location having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Hi Sridhar,
Thanks for this! Only thing now is that the .site-header is not fixed anymore on scroll. Is there a fix to this?
Hope to hear from you,
Regards,
Niels
Goodday Sridhar,
You’re using jquery for the init.js. In this codepen, the solution of the fixed header (which is way better) is described. Here: https://codepen.io/pazguille/pen/ZBxdgw . But the init is written in normal Javascript and not JQuery. I can’t get it to work. Probably have to implement the transitions in the css code but can’t get it to work. I recon others will probably want a fixed header to. Maybe even like this: https://www.ad.nl/ (when viewed on small screen) where the header always stays in view.
Hoping for a solution (or a new tut maybe),
Regards,
Niels
Solution here: https://www.facebook.com/groups/sridharkatakam/permalink/1641507042603406/?comment_id=1641777919242985&reply_comment_id=1642936895793754&comment_tracking=%7B%22tn%22%3A%22R%22%7D
[…] In the past, I wrote about using Slideout.js for sliding in the primary navigation menu when the hamburger menu icon is tapped on smaller screens in Genesis and Altitude Pro. […]
[…] 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 […]