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
- Create a small JQuery file to add the mobile navigation button
- Enqueue the jQuery file in your functions.php
- 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">≡ 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.
56 responses to “Responsive Website Navigation for Genesis WordPress Themes”
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!
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.
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?
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.
thanks marcy. that works, however i was hoping to keep it as a sticky menu. is this possible?
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/
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
Thank you, Rob! I hope it works for you on mobile too.
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.
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.
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
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
I’m glad the code works great for you, Marc!
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??
Thank you again for an awesome piece of code :)
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.
Simply put… Beautiful :)
Thank you, Orlando! I’m glad that worked for you.
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.
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.
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.
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.
Thanks a lot maam!!! your great…
You’re welcome, Mahesh.
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 ?
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.
Thank you ! I’m looking forward to see that !
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.
Great !
It took me quite some time to understand everything but it works…
Thank you so much !!!
It’s good to know the post was helpful.
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
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.*/
}
That works fine!
Thanks a lot.
That’s great!
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?
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;
}
}
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
That’s great, Justin! I’m glad it worked out for you.
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
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;
}
}
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
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. :)
That’s great! I’m glad it helped.
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.displaynonethat doesn’t work my menu always shown or in open position without click.Searching for solution i think
.displaynonewas a genesis code .. i want it should work properly.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.
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
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.
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
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.
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?
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
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?
I corrected the link above; it’s not my tutorial.
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');
});
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');
});
});
Thank you for adding that, Dylan! Nice work!