Collapsible Navigation Menu

Collapsible Navigation Menu

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:

Primary Navigation Desktop
primary navigation menu on a desktop/large screen

Primary Navigation Phone
primary navigation on a phone/small screen

Primary Navigation Phone
primary navigation when the menu icon has been clicked

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.

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.

Do something awesome. Tell a friend:

subscribe by email

If you're an email kind of person, that's totally cool. Go ahead and sign up here to get the latest blog entries in your inbox! No worries, I never share your address.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Comments

    • July 9, 2013

      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?

      • July 9, 2013

        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…

          • July 10, 2013

            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–

  1. August 20, 2013

    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?

    • August 21, 2013

      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!

      • December 1, 2013

        Hi Robin,

        Thanks for this great tutorial! How did you solved Jive’s problem regarding the submenu?

        Many thanks in advance!

        • December 2, 2013

          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.

  2. September 14, 2013

    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! 🙂

  3. September 21, 2013

    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.

    • September 25, 2013

      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?

  4. January 15, 2014

    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

    • January 16, 2014

      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.

  5. February 21, 2014

    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

    • February 21, 2014

      Rob, I’m using the same nav on this site and I’ve replaced .nav-primary with .site-header. See if that does the trick. Good luck!

    • July 3, 2015

      I think you would just need to remove the max-width and min-width rules from the CSS, Amit. Hope that helps!

      • July 3, 2015

        Thanks Robin for Quick reply ,

        I would give it a shot

        Thanks

  6. September 26, 2015

    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!

    • September 27, 2015

      Without seeing the link/page where it’s happening, it’s hard to say. But if the #mobi-menu button 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-primary exists; if your site is set up differently, you’ll want to change that. Hope that helps!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple