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.
Step 1Upload jquery.mmenu.min.all.js to Atmosphere Pro's
jsdirectory. Upload jquery.mmenu.all.css to Atmosphere Pro's
cssdirectory (after creating the directory).
Step 2Create a file named say, mmenu-init.js in the
jsdirectory having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.