I’m currently working on a website project with a lot of pages. Because of the timing, I’ve gone ahead and built it with Genesis 2.0 and the fancy schmancy HTML5, which has been a bit of a learning curve, but good. The site is responsive, but has a lot of navigation going on, and one of the things I really wanted to accomplish was to set up a collapsible navigation menu, similar to what happens with the default Twenty Twelve theme, or the nifty Megalithe theme.
Thanks to Google, I found approximately eight ways to do it, but the first seven either didn’t work for me, or felt unnecessarily complicated. Finally I found a great tutorial by Rick Duncan, which felt right (and had the added bonus of being geared to Genesis developers). Since I’m using HTML5, though, it didn’t work right out of the box for me, but I got it sorted and thought I’d share. If you are using Genesis 1.9, or possibly 2.0 without the HTML5 support added on, use his code instead.
At this time, if you want to see it in action, visit Rick’s site and check his example. When my client’s site is launched, I’ll update this post with a link to it, but for now, here’s what it looks like:
Make a Collapsible Menu at Home
Here’s how I made this work for me. You’ll need to create mobile-navigation.js, add a couple lines to your functions.php, and a fair bit to your style.css.
I haven’t changed Rick’s styling beyond adjusting the selectors, and so far I’ve just used his mobile menu icon (it works with my theme, but you can make your own, too), but you can tweak as you like.