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:
We’ll call your new file theme-js.php and paste the following code into it:
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
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:
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.