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:
