Genesis Responsive Menu 2.0

Genesis Responsive Menu Tutorial
Ready to go unicorn hunting?
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:

( 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:

<?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:

/* 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!

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!

Hire Me for Help

Photo Credit: Scott Beale

253 Comments

      1. 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

        1. 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!

          1. 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.

          2. 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!

          3. 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.

  1. 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!!!

    1. 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!

  2. 256studio

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

    1. 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.

  3. 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.

  4. 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!!!

    1. 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.

      1. 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!!

  5. 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.

  6. 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

    1. 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.

      1. 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/

        1. 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.

          1. 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!

          2. Weezie Boiles

            Hi! I am using a child theme that is not HTML5 enabled. I have changed ‘nav’ to ‘#nav’ in js and css. Is there something else I need to do? I am not getting the ‘hamburger’ and have tried all I know to do…

  7. 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

    1. 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.

  8. Suuzen

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

  9. 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….

  10. Jonathan Mahan

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

  11. 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!

  12. 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.

  13. 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

    1. 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;
      }

      1. 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

        1. 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

  14. Jami Howard Mays

    This is AWESOME… I think I’ve nearly got it – but I’m missing something. I can’t get the hamburger to appear – I can fiddle with it in firebug to make it appear, but it’s super tiny. The site is Any idea what I’m missing?

  15. Jami Howard Mays

    Disqus ate my last comment, so I’m trying again. I seem to have missed something somewhere, but I’m not sure how to correct this issue. I’ve tried wiping it and going back twice and end up with the same result. I’m sure it’s something simple — like my hamburger is the same color as my header menu background — but I can’t find my mistake.

    In the header, the menu is beautiful and graceful and the drop downs work perfectly, but the hamburger navigation icon is missing. I can see it in the footer menu as well (which, for my second question, I’d like to disable this action on the secondary navigation menu but keep it intact for the primary, which is in the header right widget).

    Any ideas? Site is in development, but it’s

  16. 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.

        1. 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.

          1. Betsy

            Dear Ozz, I’m having this problem also. How can I fix this so the menu is closed by default?

            Thanks so much for the great tutorial and script, it’s the only one I got working so far.

            Betsy

  17. 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

  18. 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

        1. 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.

          1. Dom Wint

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

  19. 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

    1. 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.

      1. 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

      2. 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 :))

  20. travismelvin

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

  21. 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!

  22. 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.

    1. 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!

          1. Sabrina O

            Thanks Ozzy! I just did a -15 margin and I guess thats good enough! 🙂

  23. Nguyễn Ngọc Hùng

    Hi Ozzy, Tks for this tutorial. But I have a problem. My Menu is responsive but isn’t collapsing. I don’t understand it, I’m using Genesis 2.0 and Sample Genesis in LocalHost. Please help me.

    and you can see in the image

    1. Sabrina O

      Ok I did. I activated it but i only see the hamburger on my desktop but not my iphone… but I’ll figure that out. 🙂

      What I would like to know is how I can put the hamburger to the far right corner of the page/phone beside the navigation? Just like how you have it on this site. Thanks for helping me get to the bottom of this!

      Sabrina

  24. Adam

    Hi Ozzy,

    Before I followed the tutorial, while viewing on an iphone, my menu was showing up in a weird gray bar that spanned the entire height of my site, and it was to the left of the content.

    Now that I followed the tutorial, the gray bar is gone (which is nice), but the menu isn’t there either. I thought I followed the steps exactly, but did I do something wrong?

    Here’s the address of the site: http://www.airlinevacuum.com

    You’ll notice the picture is way too big for mobile as well, but that’s always been a problem with this as well… I know that’s a separate issue, but any suggestions on that too? lol

    Thanks for the help/tutorial!

    1. Ozzy Rodriguez

      add this to one of the responsive queries in Dynamik:

      .full-width-content .menu-primary { padding-left: 0;}

      the menu should show then. it’s just push to the right out of your screen.

  25. Weezie Boiles

    Hi! I am using a child theme that is not HTML5 enabled. I have changed
    ‘nav’ to ‘#nav’ in js and css. Is there something else I need to do? I
    am not getting the ‘hamburger’ and have tried all I know to do… Love how well you have this organized. Thank you! I hope to get it working.

          1. Weezie Boiles

            // Register responsive menu script
            add_action( ‘wp_enqueue_scripts’, ‘agency_enqueue_scripts’ );
            /**
            * Enqueue responsive javascript
            * @author Ozzy Rodriguez
            * @todo Change ‘prefix’ to your theme’s prefix
            */
            function agency_enqueue_scripts() {

            wp_enqueue_script( ‘agency-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 added this when I went through the tutorial to my functions.php file in my child theme.

          2. Weezie Boiles

            I just moved it up in my functions.php file and I do see a hamburger now but it’s still showing the nav as well below it and isn’t functioning.

          3. Weezie Boiles

            Moving up the function in my functions.php worked. Weird. Thanks so much! sorry for having bothered you. Great tutorial! Very much needed.

  26. greybird

    I used the studiopress method of repositioning my secondary menu to
    before the header. Your instructions here do turn the secondary menu above
    the header menu into a hamburger, but it doesn’t expand correctly. Is
    there a way to fix that? Thanks!

      1. greybird

        The site is in maintenance mode. I sent you an email with a login.

  27. Dag-Erling Jensen

    Hey

    It looks like my last post didn’t make it on this page.

    I am using the Ambiance theme from Studiopress on this site http://www.dagerlingjensen.no/montasje and I have setup the Genesis responsive menu. However it seems to be in conflict with the native Ambiance menu creating some bugs.

    Is there a way to shut off the Ambiance menu completely? Or so I have to fix the rest in CSS?

    – Dag-Erling

      1. Dag-Erling Jensen

        I have created the responsive-menu js and added that into the folder /ambiance-pro/lib/js

        In the functions.php I have changed the prefix to ambiance. Or have I misunderstood how the prefix works here?

        The CSS has been added to the bottom of the main CSS file.

        1. Ozzy Rodriguez

          you have to keep editing the CSS. at the appropriate media query, undo what the current menu is doing and make it look like you want.

          1. Dag-Erling Jensen

            Okey, will try that. Thank you for the replies and help. Hopefully I wrap my head around what is messing with what because this responsive menu is kick-ass 🙂

        2. Dag-Erling Jensen

          Well, I found the answear for the trouble.

          .genesis-nav-menu .menu-item:hover > .sub-menu {

          left: 50%;

          margin-left: -100px;

          opacity: 0.8;

          Will break the menu so you have to disable that in CSS.

          Hope that helps someone else that might be a newb like me and struggle with it.

  28. Ronald

    Does this work with the latest version of wordpress? I used it on a site a few months ago and it worked fine and now this morning the stopped showing up all together? I was wondering if the wordpress update could be the cause?

      1. Ronald

        Yes I found out my enque function had a typeo. I must have inadvertently overwritten it. Works great now. Thanks for this tutorial and your continued support.

  29. Shay

    Is there a way to move this menu before the header when it is being viewed on mobile, and keep the standard genesis primary nav menu after the header when viewed on a desktop?

  30. scott zosel

    Ozzy, thanks for the great tutorial. I made these modifications to a site I built with the parallax pro theme which already had responsive nav. I got it to work just fine except that + and – toggles were the same color as the background and didn’t show up. How do I change their color? Nothing I did seemed to work.

  31. Simon

    Hey Ozzie.

    I’m using this menu with a one page theme I’ve created with genesis. Could you enlighten me on how I can get the mobile menu to collapse when a user clicks a link.

    Right now the the menu expands for me but I’m having trouble modifying the javascript so the menu collapses when a link is clicked.

    Great tutorial by the way, I hope you may be able to help.

    Simon

  32. Steve Horn

    This works great…the best of what I’ve tried so far and completes my task. I did make a change to the CSS which I think helps with sub-menus on mobile device:

    .sub-menu-toggle {
    padding: 0 18px 18px; /* had to remove the top padding to get +- to be visible*/
    padding: 0 1.8rem 1.8rem;
    position: absolute;
    right: 0;
    top: 0;
    /* added these three lines to make the toplevel link expand rather than the “+” also requiring that link to not be null */
    display: block;
    width: 100%;
    text-align: right;
    }

    This tutorial works like a charm for me.

    1. Ozzy Rodriguez

      awesome! like i said in the post, depending on your theme, you’ll have to mess with the CSS a bit to make it work for you.

      glad you got it working for your site and very happy that I was able to get you started on it!

    2. Olivier

      Thank you so much Steve !! It was everything I was searching for 🙂

      And a great thanks to you Ozzy for this awsome tutorial. Great job and very nice of you to share 😉

  33. Katrina Moody

    Sure hope you are still monitoring this excellent tutorial. I was able to modify it slightly to use it with my Epik theme, but the menus are open by default instead of closed. I saw a previous note about a bootstrap file being called first and tried to address that, but it’s still happening. I was hoping you might be willing to look at the live site to see if you can see what I’ve done wrong?

    http://valverderowell.com is the URL

    I have a bit of modifying yet to do anyway (I want the menu items to be on a single line rather than altogether like they are and swap the header widget nav out for plain code) but could really use some help getting it figured out if you are still up to helping ;D

    Thanks so much (and also for the awesome tutorial – was the only one I was able to customize enough to get it working at all, lol)

  34. Katrina Moody

    I left a previous comment but don’t see it here. So leaving another one in hopes of you seeing it! I was able to get the dropdown responsive menu mostly working but have some work to do in getting all the CSS just right. I was hoping, though, you might be willing to help me figure out why the menu is open by default instead of closed.

    A comment further down in the comments section suggests that they don’t drop down properly if the boostrap.min.css is loaded first. I think the stylesheet is loaded before any bootstrap css but maybe I overlooked something or something different that could be interfering?

    I hate to be so close but still not quite there! I went ahead and pushed what I had to the live site to make sure it wasn’t an issue with my test site, and it wasn’t. If you would be willing to take a look I would be so very appreciative!

    Site: http://valverderowell.com

    1. Ozzy Rodriguez

      Hi Katrina,

      Any reason you’ve put !important on everything? It’s generally not necessary and it makes it harder to debug.

      1. Katrina Moody

        Hey there … I put !important on there to test whether some other line of CSS might be interfering that I couldn’t see ahead … I forgot to take them back off again *oops* … and I’ll try and see about line 79! (and report back!) Thanks!

      2. Katrina Moody

        You are BRILLIANT! I am now going through and customizing things for the site and redoing some major CSS stuff I had to do – but it is WORKING! Thank you SO much!

        Do you have a link or email address I can use to forward you a few bucks? I’d love to support your effort to help the overall WP community!

  35. Desiree

    Thanks so much for this tutorial! I am having an issue (which I am sure is as a result of something I did wrong and I was hoping you could have a peek at it and help me out. The menu is responsive but it is not collapsing, and the menu is now displaying vertically instead of inline even at full width which it wasn’t before. I greatly appreciate any help you have to give. My site is http://testsite1.wideeyedwonders.com. Thanks!

  36. Desiree

    Somehow Disqus ate my last comment. I followed the tutorial as described on the Child Sample theme and the menu became responsive, but is not collapsing. Also, the menu is displaying vertically instead of inline even at full width, which it wasn’t doing before. COudl you take a peek? My site is http://testsite1.wideeyedwonders.com. Thanks!

    1. Ozzy Rodriguez

      Hey Desiree,

      The tutorial was made for a site with HTML5 enabled and your site isn’t.

      Also, the reason your menu is displaying in blocks instead of inline is because you have an extra ‘}’ on line 1392.

        1. Ozzy Rodriguez

          thanks, Desiree!

          you can make it work with non-HTML5 themes, you just have to change some of the CSS rules and the javascript to work with the old identifiers.

  37. Ron

    I have this menu on the outreach pro theme and it isn’t working for me at all. I have used it in other sites and it seems to work fine there but on the outreach theme it isn’t showing up.

      1. Ron

        Every time I post a question I find the answer directly after. A change to the js file and it worked perfectly.

  38. Ellory Wells

    Ozzy, thank you for sharing this! After adding the code and js file, my menu disappears on smaller devices. It doesn’t seem to be a white font on a white background, as I can’t locate the menu when mousing over the screen.

    http://www.ellorywells.com Do you have a suggestion?

    1. Ozzy Rodriguez

      hey Ellory!

      it doesn’t appear that the script is being enqueued properly. make sure that that’s happening and then please post back!

  39. Desiree

    Hi again! I have another little quirk going on. Your amazing menu is working responsively and perfectly, but when it is collapsed, it will not open the menu. Instead, it looks like I am clicking on a link for the homepage. My site is here http://testsite1.wideeyedwonders.com. Thanks SO much!

    1. Ozzy Rodriguez

      hey Desiree,

      it has to deal with the margin-top: -65px; property you have on the button.menu-toggle rule. the header is full width but you’re trying to put the menu button in that area.

      what’s happening is that the menu button is underneath the full-width header so you’re clicking on that instead of the menu button.

  40. Drew

    I got to work at http://ui.drewrattray.com/ however when I select the menu button the nav dropdown displays properly but the menu button disappears. Isn’t it suppose to turn into an arrow? I appreciate your help Ozzy.

    1. Ozzy Rodriguez

      hey Drew,

      you have a position: fixed; property on the .nav-primary rule. if you remove that or set it to position: static; you’ll be good to go!

        1. Drew

          On a second look if I set to static the mobile nav works but it disables the sticky menu. Any ideas?

          1. Ozzy Rodriguez

            at the media query where the responsive menu kicks in, you’ll need to change the position of the menu to top: 69px;

            you should also give a fixed position to the button.menu-toggle and give it a width of 100% and probably a background-color of #fff so it’s not see-through

  41. Fran Eleazer

    Great tutorial, Ozzy! Everything worked as you said, except one tiny thing…
    Before I added any of your code I had my menu centered using this CSS:

    .genesis-nav-menu .menu-item {
    display: inline-block;
    float: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    }

    After I added the code in your tutorial, the menu appears to be left aligned. I fiddled around with the new CSS, but I’m not that good yet and I couldn’t get it back to centered. Can you help me out? Here’s the site address: http://541.38f.myftpupload.com/

    Thanks so much!
    Fran

    1. Ozzy Rodriguez

      the CSS you added would only change the mobile menu and not anything else. the non-mobile menu would look exactly like it did before you added the other CSS.

      if you could take out the responsive menu CSS, then i could see what it looks like without it. we can go from there!

      1. Fran Eleazer

        Thanks, Ozzy. I removed the CSS for your responsive and of course you’re right, it’s still not centered… so I did comment out some of the other CSS that might be affecting it and I still can’t get it to center again. It was centered at one time! I realize this isn’t your problem, but if you have time to tell me what I’m doing wrong, I’d appreciate it!

      1. David Hedley

        Thanks Ozzy. Not directly, so it must have been some external code affecting it as I’ve just tidied up some other CSS. Thanks for the quick response anyway.

  42. Chris Rouse (@ChrisRouse)

    Is there a way to move the +/- to the left of the menu with some padding/margin-right? I was able to move it by swapping the “right: 0” with “left: 0”, but it stacks the button behind the menu item. I couldn’t figure out a way to get it to align next to the menu with proper spacing.

  43. Ben

    Ozzy – the touchscreen menu with submenus problem has had me flummoxed for months. You are every bit as legendary as that unicorn!

    1. Ozzy Rodriguez

      Hi Betsy,

      In the CSS above, the lines where the rule is for nav was meant for the DOM element, not a class. In the CSS in your theme, you made it a class, ie. .nav

      I’d look on line 2784 of your style.css and remove the period before the nav. That should do the trick!

      1. Betsy

        Dear Ozzy, it works, I’m really happy!

        Thank you so much for your kind assistance.

        Betsy

      1. Ozzy Rodriguez

        Hi Josef,

        You did to quite a bit of editing which makes things more difficult. I’ll try and get you some of the way there, though.

        In the same query where the menu becomes active, try adding the following:

        .site-header .widget-area
        .title-area {
        width: 100%;
        }

        header.site-header.animated.headroom–top {
        height: auto;
        }

        .site-header .widget {
        float: none;
        }

        .genesis-nav-menu .menu-item {
        float: none;
        }

        Since the theme you customized doesn’t have rem values in it, you should take those out and leave the pixels.

        Since the padding has changed on the menu items, you’ll need to change the CSS of the submenu button as well.

        .sub-menu-toggle {
        padding: 5px;
        }

        that should get you fairly close! hope that helps!

  44. zaugger

    Thanks so much for the tutorial, Ozzie! The world is a better place for having guys like you share your expertise!!

  45. Amar Ilindra

    I tried this on my news theme (not news-pro) but it failed completely. I added JS file, added functions part and css as well. But still i can’t make it work. Can you please help me in figuring the problem.
    SIte: http://www.geekdashboard.com

    Thank in Advance.

    1. Ozzy Rodriguez

      Hi Tom,

      It doesn’t look like the responsive-menu.js is in the right place because the script that you’re calling is giving a 404 error.

      1. Tom Semmes

        You are right about that. I had the js file in the theme folder and not in the root directory. But when I moved it there I still see no change. I really appreciate your help in this!

  46. josef

    I had the js file in the theme folder and not in the root directory. But when I moved it there I still see no change.

    As the tutorial explains, the js file is supposed to be in wp-content/themes/genesis-child-theme/lib/js/

    The first thing we’re going to do is create a directory ‘lib’ in your child theme’s directory…Inside of our ‘lib’ directory, create a ‘js’ directory…We’ll use this directory to add the JavaScript file that’s going to make the responsive menu work.

    It does also say:

    Technically you could just place the js file in the theme’s root directory

    But for that to work you’d have to change the following line from the code that the tutorial tell you to put in your functions.php file


    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

    That bit of code refers to ‘/lib/js/responsive-menu.js’ so that is where it is looking for the js file.

    1. Ozzy Rodriguez

      i’m not understanding the question. i can’t see how you’re loading the script in your theme, so i can only give advice on how i said to do it in the tutorial, know what i mean?

      1. josef

        I don’t have a question, I was trying to lighten your load by responding to Tom’s latest comment above!

        i.e. it sounds to me like he missed the beginning bit of your tutorial where you explain that first you need to create a /lib/ folder inside your child theme folder and then a /js/ folder inside that. Sounds to me like Tom first had his js file in his child theme folder and now has it in the wp root director or something, instead of having it where the tutorial says to put it i.e. in /child-theme/lib/js/

          1. Tom Semmes

            Thanks josef and Ozzy. That helped me to work out the problem. I did first have the js file in the child theme as specified. And then when that didn’t work I tried moving it to root directory and used a hard link, i.e., http://jeffcohan.net/lcc/lib/js/responsive-menu.js. But that didn’t work either. Then I realized in looking closer that I hadn’t changed “prefix” to be the theme’s prefix, i.e “genesis_sample”. So that worked out! Thanks for the help.

  47. Theresa Wagar

    Ozzy,

    When I found this tut I just plain wanted to hug you!!! I’ve been looking for a simple explanation for quite a while now. This is ALMOST working on my temp site:

    http://www.tewconsulting.com/derm

    Sadly, this site uses a lot of sub sub menus. While the code is there for the links in the sub sub menus, you can’t see them when you click on the “+” It’s just blank?

    I tried changing the colors, but that didn’t produce any results either.

    Can you point me in the right direction?

    Again, thank you so much!! This is the closed I’ve gotten to a unicorn in forever!

    Theresa 😎

    1. Ozzy Rodriguez

      Can you deactivate WordFence? I think it’s now blocking resources from fully loading or something for me. Probably not a good idea to have it active on a dev site.

        1. Ozzy Rodriguez

          in the same query that you’ve placed your responsive menu CSS, you’ll need to add something like this:

          .menu-primary li ul {
          background: none;
          padding: 0;
          }

          that should get you on the right track!

          1. Theresa Wagar

            Shucks! I added the code above at the end of the @media only screen and (max-width: 684px) where I added the responsive CSS fro the hamburger. Still not showing the submenu and submenu submenu lists. Any other suggestion, Ozzie? I really appreciate the help debugging this!!!

          2. Ozzy Rodriguez

            ok, a couple of other things you need to add.

            .menu-primary ul {
            float: none;
            }

            .menu-primary li li a,
            .menu-primary li li a:link,
            .menu-primary li li a:visited {
            width: auto;
            }

          3. Theresa Wagar

            Oh, let the happy dance begin!!! That worked beautifully! Do you have a donate button on your website? I’d love to buy you a big cup of coffee and treat!

            Greatly appreciate your help, Ozzy!!!

            Theresa 😎

  48. criggerAdam

    Is this breaking in IE11 for anyone else? I’m using this on a few sites and in all instances the nav loads completely expanded and vertical regardless of the browser size. The weird thing is — I’m not seeing the problem in my virtual cross browser testing app, but it’s occurring on all the actual machines I’ve tested.

  49. Amy K.

    Hi Ozzy,

    The Studiopress child theme I used came with a responsive menu. In the desktop version of http://414mainhuntingtonbeach.com, hovering over the top level menu item yields a dropdown in which the top level links to one page, and the sub level links to another page. However, in the mobile version, the sub level works, but the top level does not. I’m mystified! Any tips you might have on correcting that would be greatly appreciated.

    Thank you,
    Amy

    1. Ozzy Rodriguez

      Hi Amy,

      For the most part, anything having to do with touch devices and hovering is kind of weird. You can’t really hover on a touch screen.

      I see that you’ve enabled the superfish scripts in Genesis and enabled HoverIntent in core. You probably don’t need to do that.

      The problem you’re having is that the top-level menu item and the sub-page menu button are in the same spot. Hoverintent is probably getting confused. You can change the positioning of the sub-menu-button from absolute to relative and see if that gets you any closer to where you want to get.

  50. laduewebmaster

    Ozzy I have tried everything I know to do, I have went over your instructions and the comments by other users backward and forward and I can’t get this thing to work, can you help me out.

    http://www.ladueschools.net/wptest/

    This is not an HTML5 enabled template it’s an older template that was updated a few months after I purchased this one and the newer version has the menu built in to the design. Any help would be appreciated.

    1. Ozzy Rodriguez

      you have to change quite a bit of the CSS and jquery to make it work in non-HTML5. change the ‘nav’ declarations to whatever your theme is using and you should be on the right track!

  51. lilifrancklyn

    Part II.
    The menus look good on iPad mini though. The mobile is iPhone. Where is the hamburger supposed to show up? I can’t see it on the iPhone.

    Thanks very much!!
    Lili Francklyn

  52. Theresa Wagar

    HI Ozzie,
    My client couldn’t figure out what the hamburger was . ..LOL. Since it’s a dermatologist, they deal with a lot of older folks who may not have caught up with the three lines being a menu. She asked me to add the word MENU above the hamburger. I’ve been playing with it and keep getting them side by side. Is there a trick I’m missing to get the menu to stack ABOVE the hamburger on the screen?

    MENU
    HAMBURGER

    And can I change the font size for MENU so it’s smaller?

    The website is live at http://aiderm.com

    Appreciate your help!

    Theresa 😎

    1. Ozzy Rodriguez

      I’d try text aligning center the css for it and you can change the font size in the .menu-toggle to be smaller and add a different font size in the .menu-toggle:before rule.

  53. Mark Law

    Thanks Ozzy, you’re a legend unicorn hunter, I hope the King rewards your efforts by including this in the Genesis core 🙂

    1. Ozzy Rodriguez

      The issue seems to be in the way Dynamik is set up. It’d be a little easier to diagnose the problem if you unminify the stylesheet.

      I think that option is under Dynamik settings somewhere.

        1. Ozzy Rodriguez

          I guess Dynamik adds some stuff that the Sample theme doesn’t have, so you’ll have to add some more CSS to get it right.

          On the line where you have .genesis-nav-menu .menu-item, add a clear:both; to it and that submenu should show up.

          1. Graham Hollinger

            Ah excellent, it’s sorted now! If you have a paypal I would be more than happy to make a donation for your help – its much appreciated 🙂

  54. Nathan Garrett

    When ever I click on the menu from a mobile device it disappears. I believe it has something to do with the hovering effect in css but cant figure it out…

    Any suggestions?

  55. Dana Marie

    Hi Ozzy, my name is Dana and I am having some trouble setting up the responsive menu in my starter theme. I have downloaded the latest 2.0 genesis parent theme along with the genesis starter theme. I have converted the starter theme from XHTML to HTML5 using an online converter here: http://cobaltapps.com/genesis-xhtml-to-html5-css-converter/

    Everything seems to work great except for the submenu. The plus icon looks cut off and misplaced and the submenu items are not visible. Here is a screenshot of the problem: http://tiny.cc/y089px

    Any ideas as to how I can fix this?

    Thank you,
    Dana

    1. Ozzy Rodriguez

      hi Dana,

      do you mean you’ve downloaded the latest sample theme from StudioPress? if so, you don’t have to convert it as it’s already HTML5.

      do you have a link to the site?

      1. Dana Marie

        Thanks for responding. I don’t have a link to the site as I am developing it in localhost. I thought I had downloaded the latest sample theme from genesis but it wasn’t. I ended up finding another starter child theme and have implemented your responsive menu. It’s working perfectly now! Thank you.

  56. Dave Ham

    Ozzy, thanks for the tutorial here.

    However, I’m having some problems- could you point me in the right direction?

    I’m using the child theme “Generate”, and I’ve installed it: http://www.InfoMarketing101.com/blog (the root page is built with a different plugin, and a different menu).

    Anyway, I’ve followed your steps- but the responsive menu isn’t working.

    (one question- in the code for functions.php there’s a comment

    // Don’t add the opening <?php tag

    Does this mean we're not supposed to include this when pasted? I feel sheepish that I'm the only one here who didn't grasp that).

    Anyway, open to any thoughts you have, and again, thanks for the guide- I dig your writing style.

    Dave

    1. Ozzy Rodriguez

      yes, that’s what it means!

      don’t be worried about asking the question as i’m sure others have wondered the exact same thing!

  57. Brandy @ MommySplurge

    i’m sure you get tons of questions, but this eats my menus instead of displaying the collapsible menu. i have everything in the proper directory, changed the prefix in both places, any help? i use simply luxe child theme and i have a soliloquy slider at the top too.

    1. Ozzy Rodriguez

      sorry for the late reply, but i would need a link to the site in question to be able to help.

      i’m not familiar with that theme, but if it’s an HTML5 enabled Genesis child theme, it should integrate very easily.

      it sounds like you could be missing some CSS or the JS may need to be updated for the theme you’re using.

  58. pants

    This breaks sub-menus when you go from mobile to desktop after having collapsed a sub-menu because the display: none; never gets taken off the . Definitely an edge case, but could crop up in some use cases. Fixed:

    @media only screen and (min-width: 768px) {

    nav {
    display: block !important;
    }

    .genesis-nav-menu .menu-item > .sub-menu {
    display: block !important;
    }

    }

    And the being uncontained makes styling that row difficult, so I added a container around everything in the script:

    $( ‘nav, button.menu-toggle’ ).wrapAll( ”)

    This assumes only one mobile menu is on the page, unlike the demo.

  59. Ryan

    Thanks very much for these code snippets! Great stuff. How would I go about removing the secondary navigation from automatically being made into a hamburger menu? Not sure if I’ve missed this being covered somewhere… Thanks!

  60. Evan Scheingross

    Thanks for this awesome little script! Huge time saver and *exactly* what I was looking for! A few CSS mods of my own and I was moving on to the next item on my list.

      1. Ozzy Rodriguez

        i thought about it, but it’s so theme dependent that it would end up having a ridiculous amount of overhead and it wouldn’t work 100% of the time.

        if i can figure out a way for that to happen, i’d definitely do it.

  61. Annamarie

    Okay so it’s June of 2015 but I just had need of something like this and found the tut. It’s working beautifully – and yes, I wasn’t so scarred..

    – but why oh why am I getting the blue boxes below my nav bar? http://test.sharinghousing.com I’ve read through all the comments hoping to find an answer. I can see that they are buttons of the .sub-menu-toggle but I can’t seem to figure out how to manage them. I’d like them to go away.. I can make them disappear with CSS but I can’t recover the space. It looks weird.. there are other spacing issues. It you see this maybe you’ll simply take one look and know the answer?

    Thanks

  62. Stewart

    Thank you for this awesome tutorial! I got everything to work, however the site I’m building is a one page fixed header with smooth scroll. How do I get the menu to close off when a user clicks a menu item? Currently the navigation shows and stays open even when an item is clicked.

    1. Ozzy Rodriguez

      You’d have to add some extra scripting for this. I’ve always found that it’s best to not have a sticky header at small screens because of the amount of space it takes up, even when the menu isn’t open.

  63. Avery

    Hi Ozzy, I appreciate that’s been over a year since the last comment.
    I just wanted to ask if this works on the ‘Engage’ theme?

    I have got your solution working first time using the ‘Genesis Sample’ theme.
    Many thanks for this. 🙂

    But with ‘Engage’ it made the whole nav vanish when the breakpoint kicked in.
    I tweaked the code turn off the “display: none” on the “.nav-primary {” div, and this made the nav appear.
    – However, it turns into a normal fully open menu, stacked vertically instead of horizontally, and with no Hamburger icon etc.

    Do you know what might be stopping your code from working on this particular theme?

    Thanks for reading

      1. Avery

        Thanks Ozzy,
        According to Dev Tools in Chrome, it seems to be using the term “.menu-primary” instead of “.nav-primary”

        I initially tried using the default “nav”, then the two examples above, but it didn’t seem to work.

        I will have another look and post back.

  64. Annamarie

    Thanks! i did figure it out! So you won’t see the blue boxes. Had to do with **reading** your comment in the PHP and actually putting in my theme name. D’oh. I’m very happy with how it looks. Am planning on figuring out how to add the word “Menu” above the hamburger.

    1. Annamarie

      My CSS is rudimentary. I did manage to add “Menu” but haven’t the faintest idea how to put it above the hamburger icon. Is it easy?

  65. thea

    followed the instructions above, but got no luck. i’ve changed nav to nav-primary. Im guessing it’s because of the theme im using? im using news-pro theme…

  66. killerlipz

    Thank you!.. We are rebuilding our site with genesis and starting with the sample-theme… so far this is the easiest tutorial for the responsive nav… thanks!

  67. Sabrina

    Thanks Ozzy! Added the code to the genesis sample theme. Looks good and works great! Cheers!

Leave a Reply