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