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.
You May Also Like:
mobile-navigation.js
I think this should work across the board, since presumably everyone will have a primary menu. If yours is in the header widget, though, or you are not using the primary navigation, you’ll want to change the (‘.nav-primary’).append on line 5 to the location that makes sense to you. Rick embedded his javascript into his theme settings, which is fine, but I preferred to tuck it away in its own folder (in awesometheme/lib/js). Here it is, with my edits:
functions.php
Then, since I didn’t add the javascript to my head in the theme settings, I’ve got to enqueue it in my functions.php (Note: on the site I’m developing, I’ve moved the primary navigation above the header–if you don’t want yours there, obviously you’ll want to remove those lines):
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.
This works fine, as well as this: http://youneedfat.com/genesis-responsive-design-menu/
But both of them are giving me issues when using drop-down (sub) menus in Genesis 2.0. I think it may be related to the removal of superfish in G2.0. Are you using drop-down menus on the site using this code?
I am using drop down menus and it is a 2.0 site. The drop downs are not giving me any issues, but I have not done any responsive styling on them, so maybe that’s it?
Can you post a live link? Or DM me on Twitter @JiveDig? I’d love to see it. I’ve done this half a dozen times with 1.9, but my first attempt in 2.0beta (using the sample child theme) is throwing me…
Oh i just realized, your nav in the image above is still inline. I have my .menu-item’s as display:block; so they’re full width. You can see the 1.9 version of what I’m going for here: http://thestiz.com.
Yes, I wanted mine to stay inline but just not take up so much room. I looked at your site–awesome site, btw–and see what you’re going for. I can DM you–
hi Robin,
I love the menu and the tutorial but I am struggling big time to get it to work. I am using genesis 2.0 and the latest version of Agency (2.0)
I have the menu above the header like you do- have tried for hours to try to get the menu to function correctly but with no luck. ( using firebug )
Admittedly I am not the best with code, but not a t a complete loss. Wonder if I could beg, tempt, or bribe you to take a look at what I have going on to see what you think.
I have tried comparing it to your clients source code, and make changes to the js file for the css reference with no luck.
Here the site I am trying to get this to work on.
http://beaphotoninja.com/testsite
* I have tried it with the “load Superscript Script” enabled and without – with no difference.
thoughts?
Scott, I wobble on my code also, so I’m not sure how much help I can be. One issue I see with your code is that for your .js file, either you put it in a different folder than I did, or changed your path, because the .js file is returning a 404. So double check the location of the js file and the path in your functions.php and see if that gets you sorted, or at least started. Good luck!
Hi Robin,
Thanks for this great tutorial! How did you solved Jive’s problem regarding the submenu?
Many thanks in advance!
Hey Stefan! For what Mike wanted, I think a different menu approach is needed. I’ve used MeanMenu on a few projects now and it’s worked well for what I needed. I think it works well with submenus as long as they’re not too long.
Hi, Robin! Thanks a lot for this article – it helped me on my way to find a solution like this for the header-right widget nav I had in Genesis. I was able to work it out due to your share here – much appreciated! đŸ™‚
Hi Robin – I love this tutorial. On test dot drugfreepa dot org it works the way I want to. Interestingly, DIFFERENTLY from how I think it’s supposed to. With no icon call in the CSS (I removed it), it nicely uses my first parent item – EXACTLY what I want. However when I try exactly the same code snippets and files on my real site dfpa dot drgfreepa dot org, It only expands the first item. I am thinking one small change to the code should do the trick but I’m lost and have been working for many hours – any ideas? Does what I say make sense? I would pay a consultant at this point. đŸ™‚ So grateful for your help as this is a tight deadline project.
Hey Marisa, it looks like you’re now at a different point than you were when you posted the comment (apologies, I was traveling). Do you still need help troubleshooting?
Hi Robin, many thanks for the tutorial, works a treat.
Do you happen to know the best way to have the word menu next to it on the left?
I could insert in the image but feel it may look a little fuzzy.
Many thanks, Lewis
Lewis, try adding a #mobi-menu:before { content: “Menu”; } rule to your stylesheet (fair warning: not tested and I have only had a half cup of coffee so far) and see how that works. Something along those lines should work.
Hi Robin, works a treat, many thanks for your good work.
Hi Robin – thanks for this awesome tutorial! You mention that line 5 of the js file:
$(‘.nav-primary’).append(”);
should be modified if your primary nav is in the header widget area (mine is). Being new to this, could you save me a bit of futzing and give me the proper syntax for that case… or a hint? I’ve tried a few things to no avail.
site is 50.22.11.60/~robin/
Many, many thanks again.
-Rob
Rob, I’m using the same nav on this site and I’ve replaced
.nav-primarywith.site-header. See if that does the trick. Good luck!I am using the Genesis Framework + the Epik theme on my website http://techgrids.com I want to try this on my website and make the menu show nice on mobile.
Hi,
Thanks for the great tutorial ,
I have one question ,is there any way I can obtain Mobile like Menu at desktop level also just like this http://i.imgur.com/v8HXw5G.png
I think you would just need to remove the max-width and min-width rules from the CSS, Amit. Hope that helps!
Thanks Robin for Quick reply ,
I would give it a shot
Thanks
Hey,
Thanks for this very useful tutorial đŸ™‚
Hi!
On my local install the menu worked and looked great. However, I’ve moved the site to a test area and the menu just disappears. I can still see the list items in the inspector, but the #mobi-menu div doesn’t even show up in the html. Any thoughts? Thanks!
Without seeing the link/page where it’s happening, it’s hard to say. But if the
#mobi-menubutton isn’t being added at all, the likely culprit is that the menu location/class for which the JavaScript is looking does not exist on your new site. The code I posted requires that an element with a class of.nav-primaryexists; if your site is set up differently, you’ll want to change that. Hope that helps!