A Genesis responsive menu with support for collapsible sub menus must be some sort of coding unicorn. Why do I say that?
Well, because there are tons of tutorials out there that show you ways of adding a responsive menu to your website built with the Genesis Framework and some of them are pretty good. There is only one problem: support for collapsible sub menu items was lacking, at best. Most of them displayed all of the sub menu items at once, or just assumed you wouldn’t be using them at all, which made for a bit of a mess when viewed on your phone or tablet and a bad user experience. In the age of responsive design, this is definitely no bueno!
Why hasn’t there been a tutorial written for creating a Genesis mobile menu with dropdown support? It’s pretty obvious that visitors would rejoice, seas would part and Skittles would fall from the sky! Would it be too much code or too much work? I don’t know and don’t care.
It’s time to go unicorn hunting.
Creating Necessary Folders for our Genesis Responsive Menu
For this tutorial, I’ll be using a fresh install of the Sample Child theme from Genesis. You may or may not have to change a couple of things used in the tutorial, depending on how much your child theme is customized.
The first thing we’re going to do is create a directory ‘lib’ in your child theme’s directory if you don’t have one. We do this to separate stuff and keep our child theme’s directory as clean as possible. Technically you could just place the js file in the theme’s root directory, but I prefer to keep things organized.
Magical Genesis Responsive Goodness
Now that our directory structure is in place, we can start placing and editing files that make the magic happen. Don’t be scurred, it’s not too difficult.
I see the mythical Genesis unicorn getting closer, don’t you?
Now we need to make sure our theme uses that file we just created. Hello wp_enqueue_script! We need to add the following code in the functions.php of your child theme:
I can almost touch the magic. Ever wonder what unicorns taste like? We’re about to find out, friends.
The final piece to the puzzle is in the CSS and I’ve done the work for you. Add the following to the bottom of your style.css in your child theme:
You’ll need to style the colors in the CSS above to suit your theme’s needs, but you should get the idea.
Yeah, that’s it. We’re done. Unicorn captured and ready for eating. Mmm… tastes like bacon.
Want to see a Genesis Mobile Menu in Action?
Here’s a demo for you to go see that it works. Pretty awesome, right?! Now anyone with a little bit of basic knowledge can add a responsive collapsible mobile menu to their Genesis website with just a few simple files. It was a pretty triumphant moment when we finally got this working. I hope you guys have a similar experience when you get it working on your own Genesis sites.
Let me know if you have any comments or are having any trouble getting the Genesis responsive menu to work in the comments below!
Want Some Help With Your Genesis Site?
If you’re having trouble with this, I’ll do my best to help you out in the comments bellow, so don’t be afraid to ask. If you’re looking for more help or you’d like someone to work on another part of your Genesis website, send me a message and let’s work together!
Photo Credit: Scott Beale