In the comments section of How to Add a Right Sidebar in Atmosphere Pro a user asked:
This is pretty awesome, thank you for the awesome tutorial. I have another modification for Atmosphere Pro that I would like to implement and that’s around the Responsive Menu. Would it be possible for you to put together a tutorial for having an “off-canva” responsive menu? Meaning, that when the responsive is required (smaller media screen, etc.) then it stays to the right of the site name/logo rather than appearing right under the site name/logo. Here is an image to show you what I mean:
https://www.dropbox.com/s/bxzdy5aoor78f5j/Screen%20Shot%202015-11-17%20at%2011.21.54%20am.png?dl=0
Can we achieve this with Atmosphere-Pro?
There are several jQuery scripts for off-canvas mobile menus and I wrote about some of them in the past on this site.
App-like off-canvas menu using mmenu + Hide header until it's needed using Headroom in Genesis
App style off-canvas menus and sidebars using Slidebars in Genesis
How to add multiple Slidebars in Genesis
Adding a responsive side menu in Genesis using Sidr
In this tutorial I am going to share the steps for setting up an off canvas menu using mmenu jQuery plugin in Atmosphere Pro. Here's the overview:
- The standard Header Menu (WordPress menu assigned to Header Menu theme location) will appear from 1025px and above.
- From 1024px and below, we are going to replace the menu with a "hamburger icon + MENU text" button.
- Clicking on this button will slide open the off canvas menu from the left edge of screen. Clicking anywhere on the page or the x in the side navigation will close the menu. Sub menus, if present will be shown vertically below their parent menu items.
Screencast:
Screenshots:
Step 1
Upload jquery.mmenu.min.all.js to Atmosphere Pro's js directory.
Upload jquery.mmenu.all.css to Atmosphere Pro's css directory (after creating the directory).
Step 2
Create a file named say, mmenu-init.js in the js directory having the following:
A+
Thank you so much for responding to my query around this!
Cheers,
Antxon
Both links in Step 1 are going to a 404 page – there a new link we can have to implement?
You can find links to download the latest version’s js and css files at https://github.com/FrDH/jQuery.mmenu/tree/master/dist.
Take a note of the file names. There seems to be a few differences. Ex.: When this tutorial was written, the file was named jquery.mmenu.min.all.js where as the current version’s is named jquery.mmenu.all.min.js. Just make sure you are enqueuing the correct files.
Thanks for the advise, I managed to get the correct file (I believe); but the menu doesn’t seen to slide in like the demo. Maybe you can take a look and see if anything jumps out at you? Domain: http://onallfloors.com
Hi Sridhar,
I am experiencing some issues with the menu, they are:
1) If I have a logo then it is not aligned – I am sure it has to do with the CSS
2) The menu does not slide out from the side like in your demo.
Thanks in advance.
Antxon
Hi Sridhar,
The menu does not slide out from the side anymore. It appears that changes in the jquery for mmenu have broken the code
Any possibility you could update your tutorial?