Black Hills Web Works
Mobile responsive menu link button

How to add a mobile responsive menu to your Genesis WordPress website

This tutorial explains how to add a Footer Anchor mobile menu to a Genesis or StudioPress WordPress website. The beauty of the Footer Anchor technique is in its simplicity - it just works, and there is no JavaScript involved. The code I've provided below is Genesis-specific, but you could adapt it to any 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:

Pros

  • Easy to implement
  • No JavaScript dependency
  • Little CSS work required to scale up
  • Single button in header

Cons

  • 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.

Is this the perfect solution for every website? No, but I'll stick my neck out and suggest that it's a great solution for many websites. If you have a huge, multi-layered menu then you will probably want to go with one of the other techniques, or work some JavaScript into this one so that menu items with submenus are collapsible.

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

https://gist.github.com/6243922

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"

https://gist.github.com/6244118

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.

Some examples

Here are some websites I've built that are using this technique, arranged by theme.

Agency

lifechurch.bhwebworks.com

Education (re-worked just a bit :) )

gracechurch.bhwebworks.com (HTML5)

eleven40

bellapartners.org

Executive

woodland.bhwebworks.com (HTML5)

parkviewefc.org

Metro

citychurch.bhwebworks.com (HTML5)

rapidcitymidgetfootball.com

Minimum

This site :)

Outreach

thegathering.bhwebworks.com (HTML5)

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.

Final thoughts

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

You are receiving this email because you subscribed at blackhillswebworks.com.