Responsive Website Navigation for Genesis WordPress Themes

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


Comments

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

  1. Scott says:

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

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

    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?

  4. Dylan says:

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

  5. Rob Wu says:

    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

  6. Rob Wu says:

    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.

    • Marcy Diaz says:

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

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

    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

  9. Orlando says:

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

    • Orlando says:

      Thank you again for an awesome piece of code :)

      • Marcy Diaz says:

        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.

  10. Mahesh Sangam says:

    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.

    • Marcy Diaz says:

      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.

  11. Raoul says:

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

    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.

  13. Petri says:

    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

    • Marcy Diaz says:

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

    That works fine!
    Thanks a lot.

  15. Justin says:

    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?

    • Marcy Diaz says:

      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;
      	}
      
      }
      • Justin says:

        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

  16. phil says:

    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

    • Marcy Diaz says:

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

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

  19. sandeep says:

    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.

    • Marcy Diaz says:

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

    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

    • Marcy Diaz says:

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

    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

  22. Amber says:

    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?

  23. Dylan Stevens says:

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

    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');
    });
    });

Leave a Reply

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