Genesis Responsive Design Menu Tutorial | Mobile Menu

Let’s be clear: there are lots of ways to create a mobile-friendly menu using responsive design. The developers of the Genesis Child Themes from StudioPress have decided to create their menus entirely with CSS and I can definitely understand why. StudioPress needs to make their themes easy for their customers to edit and creating the responsive menu this way accomplishes that goal nicely.

Unfortunately, the way their responsive menus work can be a little clunky on smartphones. They tend to push the content down in the viewport and dominate way too much screen real estate for my taste. The menu items also tend to be a bit difficult to mash with my fat fingers. In an effort to create a more user-friendly (and fat finger-friendly) mobile responsive menu, I decided to add a small amount of jQuery and clean things up a bit for smartphone visitors.

It should be noted that this tutorial assumes you are using a Nav in the #Header widget area. If you are using a Primary or Secondary Nav, a few things will need to be changed in order for it to work correctly. This tutorial also assumes that your Genesis child theme is already using responsive design. If it isn’t, you’re going to need to go through some additional steps before using this tutorial.

If you don’t already have one, create a folder called lib

Inside that folder, create another folder called js

Inside your js directory, create a new file called general.js and paste the following code into it:

Keep in mind that the #menu-main-menu selector will probably need to be changed to whatever ID your primary navigation is using. Once you’re finished with that, you’re going to need to load your new JavaScript file. Let’s do this the WordPress way by creating a new php file inside the lib directory.

We’ll call your new file theme-js.php and paste the following code into it:

This file is also where you would load any additional JavaScript files your theme needs. If you need to load more JavaScript files, simply add them using the same method I’ve used for general.js. You should also try to use WordPress conditional tags whenever possible to prevent your scripts from loading when they aren’t necessary. Speed matters!

Once you’ve saved your theme-js.php file, you’re only a few steps away from creating your awesome Genesis mobile responsive menu! Next, we’re going to add a bit of code to your theme’s functions.php file.

When you add the following code, make sure you place the
require_once(CHILD_DIR.'/lib/theme-js.php');
line under the
require_once( TEMPLATEPATH . '/lib/init.php' );
line at the top of your functions.php file. The rest of the code can be added farther down in functions.php

Here’s the code you’ll need to add to your functions.php file:

I’ve added the code for the menu toggle to the genesis_header_right hook which will place it in the header widget area above my menu. If your menu is in another location, you’ll probably want to move the toggle to a different hook. I recommend using the genesis visual hook guide to help you choose the best location.

Now, the rest is mostly up to you. There are some essential CSS rules that you’ll need to declare in order for this to work correctly. Add the following to your style.css stylesheet:

Update: Genesis 2.0 Has Made some Changes.

If you’re using 2.0, Use These Styles:

If you’re using Genesis 1.x, Use These Styles:

At this point, you’re basically done, but you’ll still need to style your new menu to fit your theme. My advice is to choose your breakpoints wisely and remember to scale around your content rather than cater to particular device widths. Popular device resolutions will constantly change, so try to focus on making your content usable and aesthetically pleasing at any screen size.

There are a few things about this method that bug me, particularly the fact that you have to use an !important declaration. If anyone has a better method for creating a menu using responsive design in Genesis, please let me know! If you have any questions, leave a comment or send me a message through our contact form.

http://twitter.com/cdils carrie dils

Nice. I’ll have to try this out. Guess the .js will load whether you’re viewing on mobile or not? Does it matter a hill of beans? Thanks for the tut!
- realFATmedia
  
  Yes the script will load regardless of what platform you’re on. If you wanted to conditionally load it for mobile visitors you could use this plugin and add a conditional statement in theme-js.php http://wordpress.org/extend/plugins/mobile-detector/
ozzyr

awesome tutorial! i can’t see the code for the functions or css from guthub. anyway to get that updated?
- realFATmedia
  
  It looks like Github is down for maintenance. I think I might have to start self hosting my code at least as a backup…
  - ozzyr
    
    thanks for the update! i’ll check back in a while after they’re done with their maintenance
Steve Wharton

Wow! Impressive tut; thank you. Noodling thru this on our local dev site is um…interesting. We’re learning lots
http://www.ozzyrodriguez.com/ Ozzy Rodriguez

so i tried it and it works great! i’m trying to get it to work with second level items, though… any ideas?
- http://digitalscrapbookinghq.com/ Melissa Shanhun
  
  Me too!
  - http://digitalscrapbookinghq.com/ Melissa Shanhun
    
    I’ve used the #nav ul.nav,
    
    #nav ul.menu,
    
    #subnav ul.nav,
    
    #subnav ul.menu
Rudd

WordPress has a conditional tag for mobile detector wp_is_mobile() , try use that to prevent loading the Js file when not viewing the site in mobile.

Great tutorial, works on the theme I’m working on. Just need to change some css
- Rudd
  
  Quick update, I tried adding the wp_is_mobile tag, so the code will be as follow:
  
  function mycustom_load_the_js() { if ( wp_is_mobile() ) { wp_enqueue_script( 'general' ); }}
  
  So when I view from my computer, when I clicked on the menu, it won’t work since the js is not enqueue. Tried looking at the source code, also no js file from the script above load. I guess the conditional tag works perfectly?
  
  I use a browser agent switcher addon in FF. Tried switch to Iphone user agent, the menu works perfectly.
  
  Just want to share something I just learned.
  - http://digitalscrapbookinghq.com/ Melissa Shanhun
    
    So where would you place this code? In the theme-js.php?
http://twitter.com/anythinggraphic Kevin Donnigan

Thank you for this Robert! It took me a while to find but I knew there was a better way than all those other tutorials for mobile navigation solutions. When I saw how easy this was to implement, I realized I should have just coded it myself. Easy enough… Works like a charm!
Pingback: Managing Files in Genesis
Mark Buskbjerg

Hi

I’m trying to make the elements in the ul turn up under each other, like you have on fat media…
I simply can’t figure it out.
Right now my normal menu is horizontal lined up, but I want it to be vertical in the mobile menu.
I’m running on genesis, and everything else about the menu is working out great. Thanks for a great guide!
Justin Meier

Is this updated for Genesis 2.0 and HTML5?
- http://youneedfat.com/ FAT Media
  
  I’ve updated the style.css portion so everything will work with Genesis 2.0. Everything else in the tutorial should still work fine with both 1.9x and 2.0+. If anyone has any trouble with it, let me know!