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:

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!

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

Sign Up!

You like this post? Sign up to receive posts just like it directly to your inbox!
  • This field is for validation purposes and should be left unchanged.

Comments

      • Johannes says

        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

        • says

          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 says

            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.

          • says

            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!

          • says

            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 says

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

    • says

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

    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.

  3. Cliff Lawson says

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

    • says

      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.

  4. wpdv says

    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

      • wpdv says

        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/

        • says

          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 says

            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!

          • Weezie Boiles says

            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…

  5. Suuzen says

    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

    • says

      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.

  6. Mathias Weber says

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

  7. Josh says

    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!

  8. Ron says

    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.

  9. Phil says

    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

    • says

      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 says

        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

  10. says

    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?

  11. says

    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

  12. Josh Meth says

    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.

  13. says

    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

  14. says

    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

  15. says

    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

  16. travismelvin says

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

  17. Sabrina O says

    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.

  18. says

    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

    • Sabrina O says

      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

  19. Adam says

    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!

    • says

      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.

  20. Weezie Boiles says

    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.

          • Weezie Boiles says

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

          • Weezie Boiles says

            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.

          • Weezie Boiles says

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

  21. greybird says

    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!

  22. says

    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

      • says

        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.

          • says

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

        • says

          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.

  23. Ronald says

    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?

  24. Shay says

    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?

  25. says

    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.

  26. Simon says

    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

  27. says

    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.

    • says

      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!

  28. says

    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)

  29. says

    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

  30. Desiree says

    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!

  31. Desiree says

    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!

  32. Ron says

    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.

  33. Desiree says

    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!

    • says

      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.

          • says

            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

  34. says

    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

    • says

      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!

      • says

        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!

  35. says

    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.

  36. says

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

    • says

      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!

      • says

        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!

  37. says

    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.

    • says

      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?

      • says

        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/

  38. says

    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 8-)

  39. says

    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.

  40. says

    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

    • says

      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.

  41. says

    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.

    • says

      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!

  42. lilifrancklyn says

    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

  43. says

    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 8-)

    • says

      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.

  44. says

    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

Leave a Reply