Black Hills Web Works

WordPress Websites for Churches, Nonprofits, and Small Businesses

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

By · Published on
31 Comments

Mobile responsive menu link buttonThis 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:

  1. Add the CSS to style.css
  2. Add the code to functions.php (or a mu-plugin)
  3. 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

August 19, 2013: Updated the CSS in the above Gist by removing extra spaces in some of the CSS selectors which would have prevented the CSS from working correctly.

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”

October 28, 2013: Updated the code in the above Gist by including a conditional to see if the function genesis_register_sidebar exists. The WordPress 3.7 update process was throwing a “Call to undefined error” without that conditional.

3. Add one or more Custom Menu widgets to the new widget area

Responsive Footer Menu WidgetsNow 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 (HTML5)

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 🙂 (HTML5)

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.

Comments

  1. Hi John,

    I got here from the studiopress support forum. I added the code, and it does what I was hoping, except how do I make it so that it replaces my primary menu. Currently, it shows both on the mobile browser. Thanks, and great tutorial btw.

    • Hey Steve,

      Thanks for trying it out the tutorial. I would need to see your website before I can make the right CSS adjustment to hide your primary menu. Let me know what that is and I’ll follow up with the fix.

      John

  2. John,
    Great tutorial. Worked right out of the box. I have one issue with my implementation on the Education Theme. The site header widget area has a min. height of 120px in my site. When I test the site in the Studio Press Mobile Responsive Design Test site, the menu does what you describe in this article but the widget area stays the same size. This causes a big white space across all sized devices. I checked your Grace Church test site and although you have a similar setting, it seems to re-size when you go to smaller size devices. That is to say that when your footer menu link takes over on a 480 wide device, the message “Join us….” simply drops down against the next section. Any suggestions on how to make mine do the same?

    jc

    • Hey John,

      I’ve reworked the Education theme CSS quite a bit for that demo site, especially with what happens at the different media query breakpoints.

      In your case, to take care of that big extra white space I would add the following to the 600px breakpoint, or wherever you have it set to switch to the mobile menu:

      .site-header {min-height: 0;}
      .site-header .widget-area {display: none;}

      John

      • John,

        That seemed to work. There is a bit of a space still from another element (I have to hunt it down) but this statement took care of the big section.

        Thanks

        jc

  3. Hi John,

    Great article. The top menus on the demo sites look great and I will try them out. One question though.

    I’m having a terrible time getting a plugin or fixing the bottom menu on my site generaljersey.com. In responsive mode on a phone the footer menu is long and ugly, somewhat like your demo sites 🙁

    Do you know how we can fix these and implement accordion-style drop downs for the footer menus when they are displayed on the mobile devices???

    • Hi Chris,

      I mentioned in the article that longer menus may need to have some JavaScript added to make them collapsible, but I haven’t needed to do that yet. One of my goals with this method was keeping things really simple.

      Ugly? Come on now…I happen to like how the mobile footer menus look! 🙂

      On your site though, I don’t think it would be too hard to replicate your mobile select menus in the footer area on mobile devices, replacing the list that’s there now.

      John

  4. Hi John,

    Did this set of instructions on my second “Education Theme” site and ironically they were different. I attribute the variances to reconciling Education 2.0 with 2.0.1 and one in HTML5 and the other not. Working on these is giving me a better understanding of mobile responsive design and CSS media queries.

    On my second site I’m using the Sub-Nav as well. When I added it to the Responsive Footer Menu Widget it seemed to not have any impact. Firebug (used in Studio Press’ Mobile Responsive Design Testing site) shows the sub-nav as having its normal css styles – not one for mobile. I assume I need to identify it in functions.php (????) and then perhaps make sub-nav styles just like the main nav. Can you confirm this methodology? I could spend hours going down the wrong path.

    I appreciate your instructions. They are clear and very helpful.

    jc

    • John,

      Thanks for bringing this to my attention. I just updated the CSS to add the #subnav selector to the media query to hide that on mobile. You can add it to yours or just copy and paste my updated CSS.

      Let me how that works for you.

      John

      • Oh would that everything were so easy. Worked like a charm.

        At first I didn’t think it worked as the sub-nav is now a continuation of the menu but on closer inspection, it was added in the drop-down following the primary nav. I guess I was expecting a second button. This is better!!!!!

        Thanks yet again.

        jc

    • I’ve considered that, and even started working on a prototype, but the variety of CSS needed for different sites eventually stalled that project. Maybe someday…

  7. I really like this, thanks for sharing! I have a static header so the footer menu goes up under it. Is there a way to have it display under the header without creating a bunch of space between the content and the menu?

  8. I have an older genesis theme that isn’t mobile responsive. Without having to install a new responsive design that would override my customizations, what is the best way to make it responsive?
    Thanks for your help.

    • Hi Sonia,

      Being responsive is largely a matter of having media queries in your CSS that makes your website responsive. So if you didn’t want to switch themes, you’d need to add the various queries to your style.css to make your site responsive to different screen sizes. Though, in my opinion, you’d be better off switching themes and then bringing over any customizations into your new theme as needed. Plus, you’d get the benefit of having HTML5, which you probably don’t have now if you’re using an older theme.

      John

      • Thanks for your advice. When you switch and test themes, what is the best way to do it without disrupting your visitor’s experience?

        • Duplicate the site using BackupBuddy or something similar, install it on a subdomain somewhere, make and test all your changes, then, depending on what kind of site you’re running, either bring those changes over manually, or remove the original site and install the new one using BackupBuddy.

  9. I need help..Because im new in WP,. can you please check my website healthcertified2k.com, . when i view my website in mobile,. my menu is not responsive,. i want to have a Drop menu when i view in mobile..Please help me..Thank you and Advance..

    • Hi Caroline,

      To have a mobile responsive menu, you can either follow the steps in this article or install a new theme. New StudioPress themes, for example, all have responsive menus “built-in.”

      John

Trackbacks