How to add a mobile responsive menu to your Genesis WordPress website
I originally came up with this menu for my Genesis 1.9 websites, but it still works after converting them to Genesis 2.0, and I'm using it on both pre-HTML5 themes and the themes I've converted over to HTML5.
Caveat: I've written a tutorial on how to replace the background header image with a real logo image, and I haven't used this mobile menu on sites that use a background header image. I think it will still work, but I won't know until someone tries it. :)
A brief introduction to mobile navigation
If you only have three menu items on your website then you really don't need to worry about mobile navigation, unless you just want to do it for the coolness factor. But if you have a larger menu and your website is mobile responsive, then this is something you will need to deal with at some point.
I first started thinking about mobile navigation options after reading an article by Brad Frost called Responsive Navigation Patterns. In that article he went through seven different options for mobile navigation, with examples, pros, and cons for each technique. I like to keep things simple, and so I was drawn to the Footer Anchor technique.
Is the Footer Anchor Mobile Menu for you?
In his article, Brad lists the pros and cons of the Footer Anchor as follows:
- Easy to implement
- Little CSS work required to scale up
- Single button in header
- Anchor jump can be awkward/disorienting
- Not elegant
Personally, I think those two cons are a stretch, and maybe he was just scrambling for something to list there. As I see it, the anchor jump is little different from clicking any other link, whether it's a link to something on the same page or to another page on the website.
Here are a few additional reasons why I think this is a good solution for mobile navigation:
Simplicity. Keeping it simple is a beautiful thing.
This keeps the content at the top of the page. Screen space on a mobile device is valuable stuff, and placing the menu at the bottom of the page keeps it out of the way of your content.
Having the menu at the bottom of a page makes sense. When your users arrive at the bottom of a page, the menu is waiting for them so they can decide where to go next.
The menu also functions as a site map. It might be redundant to say that, but it's true, and this can help your mobile-device site visitors get their bearings on how your site is arranged.
Add the mobile responsive menu
Here's a quick preview of the process:
- Add the CSS to style.css
- Add the code to functions.php (or a mu-plugin)
- Add one or more Custom Menu widgets to the new widget area
Here we go then. You could switch steps one and two around, but if you add the CSS first then your site will be ready for the menu when it's activated.
1. Add the CSS to style.css
This CSS that I've worked up should work on any Genesis website, though you may need to modify it to blend in seamlessly with your website.
I recommend placing this code just above your media queries in your style.css file.
If you want the mobile menu to kick in at a screen width other than 600px, simply change that value in the @media query line.
Gist - BHWW Mobile Responsive Menu (footer nav with anchor) - CSS
2. Add the code to functions.php or a mu-plugin
The code below does several things:
- it creates a Responsive Footer Menu widget area (sidebar)
- it checks to see if there are any widgets in that widget area
- it creates the HTML for the menu button in the header
- it creates the HTML for the menu area just above the footer widgets and/or the footer
- and it adds a "Back to Top" button as the top-level menu item in the footer menu
You should add this code to the end of your functions.php file, or better yet, add it to a core functionality plugin that you should be using in your mu-plugins directory. You could also create a PHP file with just this code in it and add that to the mu-plugins directory. Adding it there instead of functions.php will allow you to switch themes and still have this code working the way it should.
Gist - Add the mobile responsive menu - "footer nav with anchor"
3. Add one or more Custom Menu widgets to the new widget area
Now when you navigate in your WordPress admin to Appearance > Widgets you should see a new widget area called Responsive Footer Menu. Add one or more Custom Menu widgets to this widget area, and select the menu to display in each widget.
Using this approach you could easily create a mobile-specific custom menu using the core WordPress menu functionality, and display it here. You can also add more than one menu widget to stack different menus in the mobile menu, and rearrange them easily.
Here are some websites I've built that are using this technique, arranged by theme.
Education (re-worked just a bit :) )
This site :)
While writing this tutorial I revised and cleaned up my original code for this mobile menu, and some of the sites listed here are still using the old code. However, the theory and functionality remain the same so they are still valid examples.
Well, there you have it. One of the simplest ways to add a mobile responsive menu to a Genesis-powered WordPress website, and with some modifications, I'm pretty sure, to any WordPress website.
So what do you think? Could this be improved, and if so, how? And if you end up using it on your website, post a link in the comments so we can see how well it integrates on other websites.
Read this article online to see all the content