Responsive Website Navigation for Genesis WordPress Themes

Share this on:

mobile responsive website navigation

Mobile responsive WordPress themes need navigation menus that are also mobile responsive, so that they can be used easily on devices with small screens. This custom Genesis WordPress theme uses a technique that hides the normal navigation with a mobile menu button on smartphones. This button technique is similar to that used by the WordPress default Twenty Twelve and Twenty Thirteen themes.

Mobile Navigation Demos

  • This website – just grab the edge of your browser and make it narrower or view it on your phone

For more methods to create mobile navigation menus, see Adventures in Responsive Navigation.

You can add a responsive website menu to the primary navigation of your Genesis child theme in three easy steps. Similar code can be used for the secondary and header navigation. The code below is for a site using HTML5 on Genesis 2.0.

Update 03/18/14: There is now a tutorial for a mobile navigation menu in the Genesis Header Right widget.

Three Steps for Responsive Website Navigation

  1. Create a small JQuery file to add the mobile navigation button
  2. Enqueue the jQuery file in your functions.php
  3. Add two responsive media sections at the end of your style.css

Note: Be sure to turn your cache plugin OFF before adding new files. Turn it back on once you get everything working again.

Step 1: Create the JQuery File to Add the Mobile Menu Button

First we need to add the menu toggle button. Since jQuery is used for the toggle function, we’re also going to add the button with jQuery. This way, if a browser has jQuery turned off, the button is not added, and the navigation will just be in a single column list, but still usable.

In your /genesis-sample folder, create a folder named “scripts”. Then using a text editor, copy the code below to create a jQuery file, name it “drop-down-nav.js”, and save it to the /scripts folder in your child theme.

jQuery( function($) {
        'use strict';

	// Insert mobile menu icon before the primary navigation ul
	$( '<div id="menu-mobile">&#8801; Menu</div>' ).insertBefore( 'ul.menu-primary' );

	// Add .displaynone class to ul.menu-primary to hide ul.menu-primary for small screen sizes
	$( 'ul.menu-primary' ).addClass( 'displaynone' );

	// Toggle nav for mobile menu
	$('#menu-mobile').click (function(){
		$('.menu-primary').slideToggle();
		$(this).toggleClass('active');
	});

});

This jQuery code adds:

  • a div with id #menu-mobile to create the button; it also adds an icon and the word “Menu”
  • adds a class of .displaynone to ul.menu-primary so that the entire navigation menu can be hidden at small screen sizes
  • adds the code to toggle the mobile menu open and closed.

Step 2: Enqueue the jQuery File in Your functions.php

Next enqueue (load) the jQuery script by adding this code at the end of your child theme’s functions.php.

<?php
// Note: Add only code below to your functions.php

add_action( 'wp_enqueue_scripts', 'amethyst_load_mobile_nav_script' );
function amethyst_load_mobile_nav_script() {

    //Add mobile button script to primary navigation menu
    wp_enqueue_script( 'nav_for_mobile', get_bloginfo( 'stylesheet_directory' ) . 'https://g3f2z8v4.rocketcdn.me/scripts/drop-down-nav.js', array('jquery'), '0.5' );
}

Step 3: Add Styles to Your Theme’s style.css

Next we add some style code to the child theme style.css.

First we find the section for screen sizes of the iPad in portrait mode. For the Genesis Sample theme, it begins on line 1571. Find the line:
@media only screen and (max-width: 767px) {
Change the 767px to 768px, and then add the rest of the code. Be sure to keep the columns code that is already in this section too.

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

	/* Start Mobile Menu Navigation - Only on .nav-primary
	 --------------------------------------------------- */

	/* Hide .nav-primary */
	.nav-primary .genesis-nav-menu.displaynone {
		display: none;
	}

	.nav-primary {
		text-align: center;
	}

	.nav-primary #menu-mobile {
		background-color: #333;
		color: #999;
		cursor: pointer;
		display: block;
		font-family: Lato, sans-serif;
		font-size: 18px;
		font-size: 1.8rem;
		height: auto;
		line-height: 18px;
		padding: 20px 16px;
		padding: 2rem 1.6rem;
		text-transform: uppercase;
	}

	.nav-primary #menu-mobile:hover,
	.nav-primary #menu-mobile:focus,
	.nav-primary #menu-mobile:active {
		background-color: #333;
		color: #fff;
		display: block;
	}

	/* Only .nav-primary is mobile */
	.nav-primary .genesis-nav-menu .menu-item,
	.nav-primary .genesis-nav-menu a,
	.nav-primary .genesis-nav-menu .sub-menu {
		text-align: center;
		width: 100%;
	}

	.nav-primary .genesis-nav-menu .menu-item > .sub-menu {
		clear: both;
		margin: 0;
		opacity: 1;
		position: inherit;
		width: 100%;
	}

} /* This bracket already exists */

Second an additional media section is needed to make the mobile navigation menu revert to the normal navigation for larger screens, and to hide the mobile navigation button. Add this section at the very bottom of style.css.

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

	/* This makes the nav menu normal again when the browser window expands */
	.nav-primary .genesis-nav-menu { 
		display: block !important; 
		height: auto; 
	}

	/* Hide Mobile Menu Button */
	.nav-primary #menu-mobile {
		display: none;
		height: 0;
	}

}

Save style.css and now when you resize the browser for your website or look at it on a tablet or smartphone, you should see the mobile responsive navigation menu. You can style it as you like. Questions? Leave a comment.

Genesis themes are available here.

Edit: Added code for Genesis child theme 1.8.

This is for the Genesis child theme 1.8.

Add the jQuery as above; the code is the same. You would also enqueue the jQuery in your functions.php the same as above. I like it better when the Superfish scripts are NOT loaded, but it seems to work fine with it too.

Then you would add this CSS to style.css in the existing media query section for 600px width:

@media only screen and (max-width: 600px) {

	/* Mobile Menu added */
	#menu-mobile {
		background-color: #f5f5f5;
		border-bottom: 1px solid #ddd;
		border-top: 1px solid #ddd;
		cursor: pointer;
		display: inline-block;
		padding: 7px 3%;
		width: 100%;
	}

	#menu-mobile:hover {
		background-color: #fff;
	}

	.menu-primary.displaynone {
		display: none;
	}

} /* This bracket already exists */

And then add this at the end of style.css:

/* This makes the nav menu normal again when the browser window expands */
@media only screen and (min-width: 601px) {

	.menu-primary {
		display: block !important;
		height: auto;
	}

	/* Hide Mobile Menu Button */
	#menu-mobile {
		display: none;
		height: 0;
	}

}

You may also need to tweak the CSS to match your navigation styles.

Here is the mobile menu with Superfish scripts turned off.

Mobile Menu for Genesis Child Theme 1,8

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

56 responses to “Responsive Website Navigation for Genesis WordPress Themes”

  1. Scott Avatar
    Scott

    Hello Marcy,

    I really like your menu and it looks great on the phones I tried it on. I expect it would work well on the Genesis site I am building and would love to try it. But my site is not HTML5. I use Genesis 2 but without HTML5 activated, with the the Studiopress Outreach child them. Would you have the code for non-HTML5 Genesis I could try?

    Thank You!

  2. Marcy Diaz Avatar

    Thank you, Scott! I’m glad if it’s helpful. I added code above for the Genesis child theme 1.8; it’s really close to Outreach. There are a couple of other tweaks that I’ll send to you.

  3. Dylan Avatar
    Dylan

    Hi Marcy,

    Thanks for the tutorial. One issue, when viewing on ipad/iphone, i can’t scroll down to view the rest of the menu. any ideas on how to fix this? i have a few sub menus which makes the menu extend past the screen of the ipad/iphone. obviously i could reduce the menu but the client doesn’t want to remove any pages from the menu.

    any ideas?

    1. Marcy Diaz Avatar

      You’re welcome, Dylan!

      I think that you’re not able to scroll your menu because it’s “sticky”, using fixed positioning on .nav-primary. Fixed position elements can only fill the viewport which is what you’re seeing. You can read more about positioning here: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
      I think it will work, if you change it to
      .nav-primary {
      position: relative;
      }
      Let me know if that does it.

  4. Dylan Avatar
    Dylan

    thanks marcy. that works, however i was hoping to keep it as a sticky menu. is this possible?

    1. Marcy Diaz Avatar

      Perhaps using jQuery, but I don’t know right off. Anything with CSS fixed positioning won’t expand beyond the viewport.

      There is a good discussion of other methods with lots of links to even more info here:
      http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

  5. Rob Wu Avatar
    Rob Wu

    Hi Marcy,

    This is one of the cleanest ways for doing this responsive menu I’ve seen. It was very easy to implement and tweak the css. I’ve seen some other more elaborate ways of editing the function page and such, but this is working great for my purposes.

    I can’t test it mobile for now, as the site is still running locally. Found some other little gems as well.

    Thanks for posting all this.

    Rob
    Holland

    1. Marcy Diaz Avatar

      Thank you, Rob! I hope it works for you on mobile too.

  6. Rob Wu Avatar
    Rob Wu

    Hi Marcy,

    Did you ever make this into a vertical setup?
    I’m experimenting with a vertical based left menu setup. A bit like the sixteen nine theme.

    Basically I added the WP menu to the ‘header right’ widget as a ‘custom menu’, and than styled the css so the header & contents becomes vertical.

    But due to the changes in page location of the menu, the css for the menu isn’t working properly. I cannot figure it out for now, and I’m pretty sure it’s something simple… :-\

    Any tips would be great.

    1. Marcy Diaz Avatar

      I haven’t made a header menu responsive yet.
      Some general comments.
      In style.css code above, where you see .nav-primary, you can use .nav-header. You may need to tweak the styles a bit.
      In drop-down-nav.js, if you have only the header menu, you can use .genesis-nav-menu instead of .menu-primary.

      If you are using the Genesis primary and secondary menus, as well, then you will probably need to use the specific menu id in the jQuery, and it gets a bit more complicated.

  7. Rob Wu Avatar
    Rob Wu

    Hi Marcy,

    Yes, that helped a lot. Got the menu working now.

    It’s just the way the CSS for the Genesis header/menu is set up, that is causing issues atm.

    For becoming a vertical side header/menu, to a responsive top horizontal header/menu needs some rewriting of the css. All the basic code for the header and widgets needs changes, including the @media code to get it all back into shape.

    Moving on slowly atm.

    cheers,

    Rob

  8. Marc Avatar
    Marc

    Thanks Marcy! I’m developing a new design for my site, moving from Thesis to genesis. I’ve been looking for a while how to make it responsive without a plugin, and your coding works great!
    Cheers,
    marc

    1. Marcy Diaz Avatar

      I’m glad the code works great for you, Marc!

  9. Orlando Avatar
    Orlando

    Thank you for this awesome tutorial!
    I put it to use on a website I’m building, and it looks great.
    One thing stands out from a functionality perspective… How does one make the submenus display collapsed??

    1. Orlando Avatar
      Orlando

      Thank you again for an awesome piece of code :)

      1. Marcy Diaz Avatar

        You’re welcome, Orlando.

        I think you will need to add a line to this code section in the @media section:
        .nav-primary .genesis-nav-menu .menu-item > .sub-menu {
        clear: both;
        margin: 0;
        opacity: 1;
        position: inherit;
        width: 100%;
        display: none; /* Add this line */
        }

        Then you will need to add another section just below it.
        .nav-primary .genesis-nav-menu .menu-item:hover > .sub-menu,
        .nav-primary .genesis-nav-menu .menu-item:focus > .sub-menu {
        display: block;
        }

        I hope this works for you.

      2. Orlando Avatar
        Orlando

        Simply put… Beautiful :)

      3. Marcy Diaz Avatar

        Thank you, Orlando! I’m glad that worked for you.

      4. Santiago Avatar
        Santiago

        when I touch a submenu, its options expand, but a double touch is made, in such a way that accidental touches are made on the expanded elements. Is there a way to fix this? I’m very happy with the result anyway. Huge thanks.

      5. Marcy Diaz Avatar

        I’ve heard of this happening after the Genesis update to 3.0, but I haven’t seen it, so can’t comment on it.

  10. Mahesh Sangam Avatar
    Mahesh Sangam

    Marcy Diaz!! im mahesh sangam from India, im trying this responsive menu for my custom made theme, but it does’t work. if you have any other tutorial for un genesis themes. please kindly help me thanks a lot.

    1. Marcy Diaz Avatar

      Thanks for your question, Mahesh. No, my code will only work for Genesis themes.

      There are two parts to adding a mobile menu, the jQuery which targets the HTML, and the CSS to style the menu. To use the jQuery, you have to understand the HTML for your theme navigation, and then you need to be able to edit the jQuery to match your theme. You can look at other examples of this in the Twenty Twelve, Twenty Thirteen, and Twenty Fourteen themes, or the stripped down theme, Underscores – http://underscores.me/

      If you don’t understand this code, you will need to look for a plugin that offers responsive or mobile navigation for your theme; I haven’t researched those.

      1. Mahesh Sangam Avatar
        Mahesh Sangam

        Thanks a lot maam!!! your great…

      2. Marcy Diaz Avatar

        You’re welcome, Mahesh.

  11. Raoul Avatar
    Raoul

    Hi Marcy and thank you for your work !
    Do you think it would be possible to make it work if we put the main menu in a widget ?
    What part of code should we change ?

  12. Marcy Diaz Avatar

    Hi, Raoul. You’re welcome.

    Yes, you can do it for the menu in a header widget, or any widget for that matter. But the code you need will vary from widget to widget. I’ve done it for a header widget, but will have to write up an explanation, so you can do it for your own situation. I’ll post about it later when I’m able to write the explanation.

    1. Raoul Avatar
      Raoul

      Thank you ! I’m looking forward to see that !

      1. Marcy Diaz Avatar

        Raoul,
        There is now a tutorial for a mobile navigation menu in the Genesis Header Right widget.
        I hope it works out for you. To use it in any other widget, you would want to change all the .nav-header and nav.nav-header references to the particular ID for your Custom Menu widget in both the style.css and the header-mobile-nav.js.

      2. Raoul Avatar
        Raoul

        Great !
        It took me quite some time to understand everything but it works…
        Thank you so much !!!

      3. Marcy Diaz Avatar

        It’s good to know the post was helpful.

  13. Petri Avatar
    Petri

    Hi Marcy,
    Do you think it’s possible to add the text MENU to a theme (minimum pro) that already has a “hamburger” menu in mobile responsive mode? I think that many people don’t understand the hamburger sign (yet), so I would like tho add the text MENU next to it, just like you do in your tutorials.
    Many thanks again!
    Petri

    1. Marcy Diaz Avatar

      Yes, you can, Petri.
      The easiest method is to edit the CSS in style.css.
      Find the section for the #responsive-icon-menu or similar. You will find a line with ::before in it that adds the icon, similar to:
      #responsive-menu-icon::before {

      Just below it add this:
      #responsive-menu-icon::after {
      color: #fff; /*This is white, but you should make it the same color as the icon.*/
      content: "Menu";
      font-family: 'Arial'; /*This should be the font name that your navigation links use.*/
      margin-left: 6px; /*This adds space between the icon and the text.*/
      }

  14. Petri Avatar
    Petri

    That works fine!
    Thanks a lot.

    1. Marcy Diaz Avatar
  15. Justin Avatar
    Justin

    Thanks for the tutorial Marcy! I have followed your instructions, but I am having an issue I hope you can help me resolve (I am very new to this stuff). It has added the “menu” button to my navbar, but it is always there. No matter what the screen size is the menu button stays and so does my normal menu.

    Any idea what I missed?

    1. Marcy Diaz Avatar

      Perhaps you’re missing this section of code that needs to be added at the very end of your style.css.
      @media only screen and (min-width: 769px) {

      /* This makes the nav menu normal again when the browser window expands */
      .nav-primary .genesis-nav-menu {
      display: block !important;
      height: auto;
      }

      /* Hide Mobile Menu Button */
      .nav-primary #menu-mobile {
      display: none;
      height: 0;
      }

      }

      1. Justin Avatar
        Justin

        Thanks Marcy. It actually started working about an hour later. I didn’t follow the caching step you mentioned, so I assume it was a caching issue.

        It looks great, thanks so much for the tutorial!

        Justin

      2. Marcy Diaz Avatar

        That’s great, Justin! I’m glad it worked out for you.

  16. phil Avatar
    phil

    Hi Marcy,
    Can I first say, what a great solution. I have tried a few others before coming across yours and this is a much simpler and better looking solution. I’m testing upgrading my work website over to genesis and html 5 with the lifestyle pro theme. I too have an issue with the menu, it works great with a mobile/ipad however when using on a desktop the “menu” icon and word stay above the navigation.
    I have added the css and gone over all parts, do you think it could be something to do with the theme I am using it on? Do I need any other amendments. I’m very grateful for any help you could provide, the site it as follows phil-gibbs dot co dot uk /test/
    sorry would rather not link off to the site incase the engines follow it, not ready yet :)
    thanks
    phil

    1. Marcy Diaz Avatar

      Thank you for your kind words, Phil. If the Menu is still showing on the desktop, you need to be sure that the last section of CSS is added at the bottom of your child theme style.css. That hides the mobile menu on the desktop.
      @media only screen and (min-width: 769px) {

      /* This makes the nav menu normal again when the browser window expands */
      .nav-primary .genesis-nav-menu {
      display: block !important;
      height: auto;
      }

      /* Hide Mobile Menu Button */
      .nav-primary #menu-mobile {
      display: none;
      height: 0;
      }

      }

  17. phil Avatar
    phil

    Hi Marcy,

    I’ve double checked this and this is at the end of the style.css file as instructed. It’s very odd, the word menu and the button shows on a desktop and is clickable and collapses the main menu. When on a mobile the navigation works as it should, just not when on a desktop. I’ve triple checked the instructions but still can not get it right. There’s no caching involved, all I can think of is that it’s something interfering from the lifestyle pro theme?
    Any ideas would be greatly appreciated :)
    thanks
    phil

  18. Maninder Pal Singh Avatar

    Thanks Marcy, that works like a charm. I have a great child theme but it didn’t had the mobile menu. Your simple tutorial made it more awesome. I had 8 items in my primary navigation and it took a lot of space on mobile screens. Now it looks great. Thank you. :)

    1. Marcy Diaz Avatar

      That’s great! I’m glad it helped.

  19. sandeep Avatar
    sandeep

    Thanks for great tutorial. I’m trying to implement this code into other than genesis a problem comes only one part.

    /* Hide .nav-primary */
    .nav-primary .genesis-nav-menu.displaynone {
    display: none;
    }

    Here .genesis-nav-menu.displaynone that doesn’t work my menu always shown or in open position without click.

    Searching for solution i think .displaynone was a genesis code .. i want it should work properly.

    1. Marcy Diaz Avatar

      Sandeep,
      displaynone is added by the .js file.
      You hide your menu with the CSS – display: none;
      You have to add that for the menu ul selector for your theme. It probably has a different name than my example, since your theme is not Genesis.

  20. Barbara Avatar

    Hi Marcy,
    So – I posted a comment earlier this evening saying that I couldn’t get this to work, then found the “Drop Down” js version… if you can help me figure one thing out, I would be so grateful. I’ve got the menu in mobile working, but its still not showing the right nav items which are social icons – is there a way to get that to work?

    Thank you for the very clear and specific instructions. This stuff boggles my brains :)

    Barbara

    1. Marcy Diaz Avatar

      Hi, Barbara,

      I think that most Genesis themes set the right nav items to ‘display: none;’ at smaller screen sizes, which may be why yours is missing. You could find that selector in your style.css. Then you could try changing it to ‘display: block;’ or ‘display: inline-block;’ to see if it appears where you want it.

      I’ve never tried keeping the right nav at smaller screen sizes, so I don’t know what else to suggest. I hope you get it sorted.

  21. Hiidee Avatar

    Wow…just try this and works fine but I have two navigation menu…after completing this only my Primary Navigation Menu uses the feature how to I make both navigation to use the responsive menu… you can check at http://techblog.byethost8.com

    1. Marcy Diaz Avatar

      You can try the code in this Gist.
      https://gist.github.com/mjsdiaz/1f0ba0cd14a699cfee27
      There are three files; use these instead of what is in the tutorial. But you will need to read the tutorial to see how to use the files.

      I have not had time to check it for errors or how it works with Prose, so you may need to adjust it.

  22. Amber Avatar
    Amber

    Awesome tutorial! I use this all the time for my websites now! The only thing is on IE 8 the display none style is being ignored and you can see the = Menu at the top of the navigation bar. Why might this be happening?

    1. Marcy Diaz Avatar

      Hi, Amber. Genesis themes really don’t support IE8 any more. I stopped a couple of months ago too. When I did support it, I added a body class so that I could target just IE8 with CSS. If you don’t know how to do that, then you can just use this tutorial.

      The menu isn’t responsive in IE8, so you can just hide #menu-mobile with CSS.

      Genesis has another menu to use now, but it also doesn’t work in IE8 –
      http://code.tutsplus.com/tutorials/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters–net-10575

      1. Amber Avatar
        Amber

        I understand why no one supports IE 7 but I wonder why no one supports IE 8? It’s not that old of a browser..

        I didn’t see your tutorial about the body class for IE 8. Was there supposed to be a link?

      2. Marcy Diaz Avatar

        I corrected the link above; it’s not my tutorial.

  23. Dylan Stevens Avatar
    Dylan Stevens

    Have you or anyone on this board had luck implanting a close on click function for a one page design, as of now when a menu item is selected the menu remains expanded. I am using this on a page using a sticky primary-nav along with Anchors.

    I am guessing adding a call in the js file under this section is where I would start just wanted to see if you have done this before

    $('#menu-mobile').click (function(){
    $('.menu-primary').slideToggle();
    $(this).toggleClass('active');
    });

  24. Dylan Stevens Avatar
    Dylan Stevens

    Answered it myself if anyone is interested

    jQuery( function($) {
    'use strict';

    // Insert mobile menu icon before the primary navigation ul
    $( '≡ Menu' ).insertBefore( 'ul.menu-primary' );

    // Add .displaynone class to ul.menu-primary to hide ul.menu-primary for small screen sizes
    $( 'ul.menu-primary' ).addClass( 'displaynone' );

    // Toggle nav for mobile menu
    $('#menu-mobile').click (function(){
    $('.menu-primary').slideToggle();
    $(this).toggleClass('active');
    });
    $(".genesis-nav-menu a").click(function (){
    $('.menu-primary').slideToggle();
    $(this).toggleClass('inactive');
    });
    });

    1. Marcy Diaz Avatar

      Thank you for adding that, Dylan! Nice work!

Leave a Reply

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

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