Genesis Responsive Menu Tutorial

Genesis Responsive Menu 2.0

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.

Genesis Responsive Menu Tutorial Step 1

Inside of our ‘lib’ directory, create a ‘js’ directory, if you don’t have one already. We’ll use this directory to add the JavaScript file that’s going to make the responsive menu work. Again, let’s keep this organized.

Genesis Responsive Menu Tutorial Step 2

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.

First we create the JavaScript file that our menu will be using. Create a file named ‘responsive-menu.js’ in the ‘js’ directory from the step before and paste in the following code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
( function( window, $, undefined ) {
'use strict';
 
$( 'nav' ).before( '<button class="menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to menus
$( 'nav .sub-menu' ).before( '<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to sub menus
 
// Show/hide the navigation
$( '.menu-toggle, .sub-menu-toggle' ).on( 'click', function() {
var $this = $( this );
$this.attr( 'aria-pressed', function( index, value ) {
return 'false' === value ? 'true' : 'false';
});
 
$this.toggleClass( 'activated' );
$this.next( 'nav, .sub-menu' ).slideToggle( 'fast' );
 
});
 
})( this, jQuery );

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<?php
 
// Don't add the opening <?php tag
 
// Register responsive menu script
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_scripts' );
/**
* Enqueue responsive javascript
* @author Ozzy Rodriguez
* @todo Change 'prefix' to your theme's prefix
*/
function prefix_enqueue_scripts() {
 
wp_enqueue_script( 'prefix-responsive-menu', get_stylesheet_directory_uri() . '/lib/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true ); // Change 'prefix' to your theme's prefix
 
}

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
/* Responsive Navigation
---------------------------------------------------------------------------------------------------- */
 
/* Standard Navigation
--------------------------------------------- */
 
nav {
clear: both;
}
 
/* Navigation toggles
--------------------------------------------- */
 
.sub-menu-toggle,
.menu-toggle {
display: none;
visibility: hidden;
}
 
/* Navigation toggles - Ensure Menu Displays when Scaled Up
--------------------------------------------- */
 
@media only screen and (min-width: 768px) {
 
nav {
display: block !important;
}
}
 
/* Navigation toggles - Mobile (Change max width as you see fit)
--------------------------------------------- */
 
@media only screen and (max-width: 767px) {
 
.menu-toggle,
.sub-menu-toggle {
display: block;
font-size: 20px;
font-size: 2rem;
font-weight: 700;
margin: 0 auto;
overflow: hidden;
padding: 20px;
padding: 2rem;
text-align: center;
visibility: visible;
}
 
button.menu-toggle,
button.sub-menu-toggle {
background-color: transparent;
color: #999;
}
 
.sub-menu-toggle {
padding: 18px;
padding: 1.8rem;
position: absolute;
right: 0;
top: 0;
}
 
.menu-toggle:before {
content: "\2261";
}
 
.menu-toggle.activated:before {
content: "\2191";
}
 
.sub-menu-toggle:before {
content: "+";
}
 
.sub-menu-toggle.activated:before {
content: "-";
}
 
nav {
display: none;
position: relative;
}
 
.genesis-nav-menu .menu-item {
background-color: #f5f5f5;
display: block;
position: relative;
text-align: left;
}
 
.genesis-nav-menu .menu-item:hover {
position: relative;
}
 
.genesis-nav-menu .sub-menu {
clear: both;
display: none;
opacity: 1;
position: static;
width: 100%;
}
 
.genesis-nav-menu .sub-menu a {
border-left: 0;
position: relative;
width: auto;
}
 
.genesis-nav-menu .sub-menu .sub-menu {
margin: 0;
}
 
.genesis-nav-menu .sub-menu .sub-menu a {
background-color: #f5f5f5;
padding-left: 30px;
}
 
.genesis-nav-menu .sub-menu .sub-menu .sub-menu a {
background-color: #fff;
padding-left: 40px;
}
 
.nav-primary a:hover,
.nav-primary .current-menu-item > a {
color: #333;
}
 
}

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!

Photo Credit: Scott Beale

Ozzy Rodriguez

WordPress web designer in San Jose, CA. I like unicorns, long walks on the beach and WordPress (not in that order).

  • Dave Fogel

    Loving it.

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Thanks, Dave!

      • Johannes

        Hey Ozzy,

        great work. Just a quick question: I would like to use your responsive menu only for the primary menu, not for the secondary navigation etc. How would I have to modify your code to get this done? Thanks for your advice.

        Regards

        • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

          Thanks for looking at the tutorial and leaving a comment!

          You’d have to change a couple of things to only select the primary nav. Whenever you see ‘nav’ in the javascript or css, you’d need to change that to ‘.nav-primary’. Then it will only select the primary navigation!

          • Johannes

            Thanks a lot for your response. I just figured that out after fiddeling with your code. You would also have to add ‘.nav-secondary { display: block; }, otherwise the secondary menus are not displaying any longer on small resolutions.

          • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

            if you change all of the ‘nav’ to ‘.nav-primary’, you shouldn’t need to do anything with .nav-secondary as it shouldn’t be effected.

            i’d have to try it to make sure, but good on you for making it work!

          • http://amtgs.com/ Tony Escobar

            Hey Ozzy, great tutorial! I managed to get the primary nav responsive, while not messing with the secondary nav. However, I noticed the CSS was messing with the secondary nav, so I added ‘.nav-primary’ to ‘.genesis-nav-menu .menu-item’ and that did the trick! Cheers.

          • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

            Awesome!

  • SureFireWeb

    Great Tut man!! I’ve been messing around with the CSS, I had it for Sandbox, then I tried to recall and it was just taking to long. This will definitely be a great future reference! Good stuff man!!!

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Glad you liked it man. One reason it took me so long to actually do it is because I hate sub menus so never had much need for it.

      We’re working on some child themes for sale and thought it’d be good to have something like this working out of the box. Then I figured I might as well write something up on it!

  • http://256studio.com/ 256studio

    When I shrink the page everything works but The label for the menu is not showing up. Just the three dashes.

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      The labels for the menus are the 3 dashes (commonly known as the ‘hamburger icon’). You can change them to whatever you’d like by changing the ‘content’ properties in the CSS.

      • http://256studio.com/ 256studio

        OK, thank you I seen some where they had the Menu word above the hamburger.

        • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

          You could add “Menu” there along with the icon, if you’d like!

  • http://pwdtechnology.com/ Chinmoy Paul

    Great Article. helping me lot. Thank You.

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      You’re welcome!

  • JemSmith

    Thank you for the article Ozzy! This will be really useful.
    One thing I’m unsure about though – content in the css. What do the numbers refer to and where do you place that content? On an Android mobile the collapsed menus show as small rectangles, not the hamburger symbol.

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Hello!

      The content are unicode characters. I updated that one to use a more accepted character (2261).

      You can see http://unicode.johnholtripley.co.uk/ for more info.

      • JemSmith

        Great – thank you!

  • Cliff Lawson

    Ozzy, thanks man. This is a VERY easy to follow tutorial!! I have a question. I aligned the responsive menu button to the right. I’d like to add the text “Menu”, and align it to the left. How would I add this? Also, my sub navigation is working, but the top menu item is not. It shows a plus sign, but not the text to the item which is “About”. Any way to fix this?

    Thanks!!!

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      I’d have to think about the best way to do the “Menu” text to be on the left and the icon on the right. My first inclination would be to make the change with CSS and add a float: right to the .menu-toggle:before then add a .menu-toggle:after and your content: “Menu” and float it to the left. Make sure to make the.menu-toggle 100% width, though.

      The issues you’re having could be related to the alignment of the menu button, but without seeing the site, it’d be hard for me to tell.

      I’m one of those guys that needs to see it before I can tell what’s going on.

      • Cliff Lawson

        Dude, that’s it. By following this, I was able to add both the “Menu” text as well as the text for the submenu floated left, while keeping the “+” floated right. Looks good. Thanks so much!!

        • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

          Good to hear and you’re welcome!

  • http://www.scoutdigitalllc.com ANNE SCHMIDT

    Thank you for this awesome tutorial!! Was able to drop this in with a few minor adjustments and it works like a charm.

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Good stuff!!!

  • wpdv

    Ozzy, I am having a small issue on a Genesis site that I can’t seem to resolve. What the best way to outline my issue, here or would you prefer email. Thanks, Patrick

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Try posting the issue you’re having here with a link to the site. That way, if others run into the same issue it could help resolve their problem as well.

      • wpdv

        Ok, thank you. I think I have followed everything as you have outlined, the issue that I’m having is that when the site is collapsed or viewed on a mobile device, the ‘hamburger’ does not appear. It might be in the php file where it states that the prefix should be replaced with the theme’s prefix. I was not clear on that, or if it is even the issue. I am running the latest WP and Genesis. I have tried disabling all of my plugins as well, with the same result. The site is http://www.alwaysonalert.us/

        • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

          The issue your having is that the tutorial is made for Genesis 2.0 with HTML5 enabled. You’ll need to change a couple of the declarations like changing ‘nav’ to ‘#nav” in the javasctipt and in the CSS.

          You may also have to disable the superfish script as that may conflict with what the responsive-menu.js is trying to do.

          • wpdv

            Thank you. I will do that.

          • wpdv

            Thank you! Works great. I found that the theme had a html5 version, so after upgrading, everything works like a charm. Thank you Ozzy for sharing this!

  • Suuzen

    Ozzie, my menu isn’t collapsing and I wondered if you might be able to point me in the right direction. I am using Genesis 2.0 with StudioPress’s Eleven40 child theme. I have a vertical menu in the primary sidebar, but after following the tutorial, the submenu items don’t collapse. I deactivated Genesis Extender, but that made no difference. I have no other plugins active. The only change I made from the above was to replace “prefix” with “eleven40″ in the functions file addition. The site is at a temporary testing domain called http://whirlpoolreviews.com; I haven’t used it for anything before so this is a clean install. Any ideas? Thank you so much for any help or ideas you can offer – Best regards, Suuzen

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Hi Suuzen!

      The problem you’re having is that you have the menu in the sidebar. Genesis doesn’t add a nav DOM element to custom menus that aren’t in the header right, primary or secondary navigation.

      If you put that menu in the header right area, it should work better for you. On a sidenote, more users will actually see it and use it since it’ll be at the top of the site rather than at the bottom. Remember, the sidebar falls beneath the content areas on smaller devices.

  • Suuzen

    Thank you very much, Ozzie! I will work on this some more. I really appreciate your help. – Best regards, Suuzen

  • http://chrislangille.com/ Chris Langille

    This tut was sooooooo legit. Thanks bruh!

  • Mathias Weber

    Thank you so much. This is what I was looking for. It looks so nice on my Executive Child Theme. Great, great work….

  • Niloy Sarker

    Thank tou

  • RDub

    Unicorn never tasted so freakin’ good. Thanks bajillions.

  • Jonathan Mahan

    Thank’s so much for the tutorial! Very easy to understand and follow.

    • http://www.ozzyrodriguez.com Ozzy Rodriguez

      You’re welcome!

  • Josh

    Hey Ozzy. Thanks very much for the tutorial. I’m wondering if it’s possible to edit the Javascript/CSS to make the parent page of a drop down menu activate the submenu, in addition to the “+” icon. On my site specifically, clicking “Programs” when in responsive mode would activate the drop down menu, instead of linking to the Programs page. Any advice would be greatly appreciated!

    • http://www.ozzyrodriguez.com Ozzy Rodriguez

      It’s definitely possible, but doing it would be very custom to your application of the responsive menu.

  • http://www.anablepomedia.com/ Robert Mitchell

    Hi Ozzy, this is a great tutorial. Super easy to follow! Thanks for sharing your wisdom.

  • Ron

    Ozzy, great tutorial man! I have a question though. I am trying to develop my own child theme and when I used the theme prefix it broke but pasting your exact code worked. Do you happen to know why that is? Any ideas would be great. Thank you.

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      did you change the prefix in lines 6 and 12?

      • Ron

        That fixed it, I had missed one of those the time before. Thanks!

  • Phil

    hi Ozzy, Thanks for this tutorial – works great. But i have one query – for some reason when i look at the mobile menu on my Samsung S4 or on Kindle – a 1px yellow border appears around the Menu icons [ie: hamburger or + and -] when clicked. Why is this and how would i get it removed please?

    Is it a CSS issue do you think?

    regards

    Phil

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Hi Phil,

      That’s a focus and it helps with accessibility. If you really want to remove it, you can do so by adding the following to your CSS:

      .menu-toggle:focus,
      .sub-menu-toggle:focus {
      outline: none;
      }

      • Phil

        Many thanks for the lightning fast response Ozzy – i think i will try it first to see.

        One other thing i noticed is [on my Samsung S4] that if i click a + symbo to access a submenu, the sub menu appears perfectly – but if I do so a second time the font size of the main and submenus seems to jump up a couple of point sizes – i am guessing it must be a CSS issue but have you noticed that before?

        thanks

        Phil

        • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

          It could be something overriding something else in your CSS. I haven’t seen that myself or heard of anyone else having that issue

  • http://dukesofbaggage.co.uk Tim

    Thanks for this, so much easier than others I have tried out. Cheers!

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Glad you liked it!

  • Josh Meth

    Hey Ozzy how do I make it so that when I open the site the menu is closed instead of open as it is now.

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      it should be closed by default like it is in the responsive demo. do you have a link to your site?

      • Josh Meth

        competeleap.com

        • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

          Hi Josh,

          It looks like the boostrap.min.css is overriding what the menu is wanting to do. it’s being loaded after the style.css which is overriding certain aspects.

  • http://www.jokeandbiagio.com/ Joke and Biagio

    I believe WP Bacon just became one of my favorite sites in the history of the world ever.

    Thanks so much for this. One question: how hard would it be to move this me u to the right of the header, like you and StudioPress do?

    Thanks
    Biagio

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Not hard at all, just have to mess around with some CSS.

  • http://www.cleanpagedesign.co.uk Dom Wint

    Hi Ozzy

    This is undoubtedly epic. I’ve tried it on a site I’m developing and it looks brilliant on everything except in Safari (and Chrome on iPad). I kind of get a halfway house between the dropdown menu and a standard nav. Any ideas.

    Thanks
    Dom

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Hi Dom,

      Can you put a link to the site?

      • http://www.cleanpagedesign.co.uk Dom Wint

        Comment with the link is in moderation :)

        • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

          I think the problem is on line 1846 where you’ve tried to comment something out. i fixed that and all is well in safari land.

          • http://www.cleanpagedesign.co.uk Dom Wint

            A-MAZ-ING! Can I buy you a beer or something? Donate to your favourite charity? Seriously, brilliant.

  • http://www.icodesign.ch Nicole

    Hi Ozzy, i have tried this step by step, and on the genesis theme it works fine when i collaps the browser, but when i activate the Epik theme and colapse it, nothing happend.. what im doing wrong?
    nickis-webdesign.com/wordpress
    Thanks for your help

    • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

      Hi Nicole,

      It doesn’t look like you’re adding the scripts and styles from the tutorial into the theme. Try doing that and let me know.

      • http://www.icodesign.ch Nicole

        Hi Ozzy, thanks for looking, sorry i had already removed it, i have place the scripts and styles again.. it looks it doesnt regonize the CSS in full screen, only when i collaps browser now :) Thanks for checking
        Same link as before: nickis-webdesign.com/wordpress

        • http://www.ozzyrodriguez.com/ Ozzy Rodriguez

          so it’s working the way you want it to now?

          • http://www.icodesign.ch Nicole

            All looks very nice thanks a lot for the cool menu :)

      • http://www.icodesign.ch Nicole

        Hey Ozzy, Thanks for your help i have found the mistake in the CSS and fixed it, now it seems it looks fine! Thaaaaanks :))

  • travismelvin

    Just put this in place on a lightly customized genesis child theme and works great. Thanks for contributing and much appreciated.

  • http://orgspring.com/ OrgSpring

    dude. Works like a charm.

  • Stewart

    Wow, freaking awesome tutorial! Thank you so much Ozzy!

    I got everything to workout, however I noticed that on a ipad mini my menu expands without clicking the hamburger nav icon. If you go to http://www.studiopress.com/responsive/ and type in the site http://fitcampla.com/ you will see on 1024 display that my menu expands, that’s whats happening on the ipad. Any way to fix this? Thanks!

  • Pingback: Show Notes: Genesis Office Hours #6 | Carrie Dils

  • Sabrina O

    Hi Ozzy… thanks for this awesome tutorial! I followed it to a T and it came out great but do you know how I can put the collapsible menu at the top far right of my logo instead of in the middle of the page below my logo? Just like how you have it in your menu at the top right corner of your page. Please get back to me when you can… thanks a bunch! I just bookmarked this site.

    • Sabrina O

      I am only asking because when it is below my logo there is a huge gap between the logo and the menu… and it just looks better when it is to the right of a logo like yours. Thanks again!