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
[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/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!
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.