With website visitors spending more and more time viewing your website from mobile devices, mobile navigation is becoming more important than ever.
We’d like to show you one option that looks and works very well. Mmenu is a free jQuery plugin for an “off-canvas” menu with lots of options, well documented, and free (but please donate to the developer to support his project).
If you’re not familiar with the term “off-canvas menu”, you’ve most likely seen it on Facebook’s mobile app – when you hit the menu button, the menu slides in from the left or right, pushing the content “off-canvas.”
We’ve set up an off-canvas mobile navigation demo here (shrink your browser or view it on a mobile device) using the 7 steps in this article.
Mmenu gives you many options for your Off-Canvas menu, including vertical dropdown sub menus, horizontal sliding sub menus, photo menus and a lot more.
I’ve used Mmenu on several sites built with the Genesis Framework and it integrated very seamlessly. I’d like to share exactly how we do that in case you’d like to add it to your Genesis Theme.
We’ll show how to set it up to work with your default Primary Navigation only. You could use it for Secondary, both Primary and Secondary, or set up a new Mobile specific menu in your WordPress admin panel.
Step 1 – Download Mmenu and extract the files
Visit the Mmenu website, download and extract the necessary files.
Step 2 – Enqueue the necessary files
Using the built in WordPress functions wp_enqueue_style and wp_enqueue_script, include the Mmenu CSS and the Mmenu JS files by adding the following to your theme’s functions.php file:
[gist id=”709c640234b95e467070″ file=”mmenu-enqueue-files.php”]
You’ll notice we’re enqueuing a third script, headerscript.js. This is a file we’ll create to activate the menu.
Step 3 – Upload the Mmenu CSS and JS files
Create two new folders inside of your chile theme (if they don’t already exist) named css and js. Upload the jquery.mmenu.css file into the css folder, and the jquery.mmenu.js file into the js folder. Your structure should follow this:
- wp-content/themes/your-child-theme/css/jquery.mmenu.css
- wp-content/themes/your-child-theme/js/jquery.mmenu.min.js (minified version)
Step 4 – Add an ID attribute to the primary navigation wrapper
The Genesis Navigation structure works perfectly with Mmenu as is, but we’ll need add an “id” attribute to the primary navigation wrapper. We’ll call it “menu”. Using the Genesis filter genesis_attr_nav-primary, we’ll add the ID attribute:
[gist id=”709c640234b95e467070″ file=”genesis-add-id-nav.php”]
Step 5 – Add the mobile navigation control button
This can be structured many ways, using a link with an ID that will be used to open or close the menu. For our purpose we’ll use the typical “Hamburger” style menu, a menu icon with three bars that is somewhat standard for mobile menu icons.
We’re using font awesome (<i class=”fa fa-bars”></i>), but you can use your own preferred method. Please note, if you’re not already using font-awesome, you will also have to enqueue the font-awesome files (we explain how to enqueue font-awesome in this article).
Also, if you’re theme already has a #header ID, make sure to substitute #header in the code below with a unique ID.
Add the following code to your theme’s functions.php file:
[gist id=”709c640234b95e467070″ file=”genesis-add-mobile-nav-control.php”]
Hide this for larger displays by adding the following CSS to your theme’s styles.css file.
[gist id=”709c640234b95e467070″ file=”hide-nav-control.css”]
Step 6 – Add file to initialize Mmenu
Create a new file with the following code and save it as headerscript.js. Place this file inside of your theme’s new /js folder.
This is where you can add all of your options and configuration settings, found on the Mmenu website. For our use, we are using “clone: true” to duplicate the menu so the original menu is left in tact.
[gist id=”709c640234b95e467070″ file=”initialize-mmenu.js”]
Step 7 – Add your CSS styles
These styles will vary according to your theme and design, so you’ll want to make some changes to match your theme, or use something completely different. Add this code to your theme’s styles.css file. If you already have a “max-width: 768px” media query, just include the css rules inside of that query.
[gist id=”709c640234b95e467070″ file=”mobile-responsive-nav.css”]
If you reduce your browser size below 768px, you should now see the menu control and clicking on that should reveal your new off-canvas menu! You might see some CSS conflicts, so we’ll need to adjust for that.
Add .site-container to all Primary Navigation rules
If you look at your source code, you’ll see that your new mobile menu has been created just after the opening body tag (<nav id=”mmenu”>). To keep your primary nav CSS from conflicting with the new mobile navigation, we’ll need to make some changes to our CSS.
We could add a prefix to the Mmenu CSS, but if you ever update you risk losing those changes.
The new mobile menu, #mmenu, sits outside of the div.site-container. The primary navigation is inside of div.site-container, so adding .site-container before your primary navigation styles will apply these styles only to your primary navigation, and not to your mobile navigation.
Here’s an example:
[gist id=”709c640234b95e467070″ file=”nav-site-container-wrap.css”]
We’ve changed “.genesis-nav-menu” to “.site-container .genesis-nav-menu” so that these rules will not apply to the mobile menu, only your primary nav.
Test your mobile navigation now and it should look perfect!
Summary:
Mmenu provides an awesome Off Canvas Mobile Menu that integrates easily with most Genesis child themes. The basic minified JS file is 11k and the basic CSS is 8k, so be aware of that, but it works and looks great.
Additionally, you can add things before or after, such as a search field, social sharing icons, etc…but that’s for another article.
View our Genesis Sample theme mobile off-canvas navigation demo here.
techntuts says
There is a bug in the demo. When I open the off-canvas navigation by reducing my browser size the menu slides and shows up. Now when I maximize the browser the offcanvas navigation do not get hidden.
Tony Eppright says
Thanks for your comment. I think it’s more of a missing feature than a bug. I contacted the menu developer some time ago and he made the decision not to include that. Not sure why, possibly because it’s targeted more for mobile users, and in that use there’s no browser resize?
Mmenu has many custom events so you could add a short function that would close the menu on windows resize and that would resolve the issue if it bothers you:
https://mmenu.frebsite.nl/documentation/custom-events.html
techntuts says
Thanks for that. I thought the same. Writing a custom function would be a good thing. Will take a look at the custom events and trigger the close when necessary.
Thanks!
Dave Fogel says
I am stuck on this right now. How did you do it? I am trying to use it with Centric Theme.
Dave Fogel says
I just can’t get this thing to work. I know I am missing something simple. Any help would be appreciated.
Tony Eppright says
I’m happy to try to help if you can give more info.
Dave Fogel says
Hi Tony,
We finally figured it out. Thanks for the reply though. I love the menu!
Tony Eppright says
great news @dave_fogel:disqus! Yea, I still think it’s the best one out there!
pjhardie says
Hey Tony – this is fantastic and works a treat… thanks! I’m trying to make the menu scroll out from the right instead of the left. Have had a look at the mmenu docs and it looks like they have an extension to do this but I’m not sure how to integrate that into your setup. Thanks in advance!
Tony Eppright says
Hi @pjhardie:disqus, I’m very sorry for the delay in replying to your comment.
I haven’t tried it using the right instead of the left, but it looks like you just have to upload the additional plugin js files to your server, then add the code they give you in the example to the mmenu initialize function above (step 6).
Let me know if you get stuck and I’ll take a closer look.
Andrew Peters says
…so the demo seems to be broken now. :/ Only tried
on Safari.