(Note: This tutorial is for older Genesis themes; it is not for any that are considered “accessibility ready”.)
Many of you have requested a tutorial, similar to my earlier responsive Genesis menu, to add a mobile navigation menu to the Header Right widget. Although many Genesis WordPress themes now have mobile navigation menus, this one is for the Genesis Sample theme. Having an easy-to-use mobile navigation menu is an important part of your mobile website design strategy.
A link to the code as a Github Gist is at the end.
As in the previous tutorial, you can add the mobile header menu in three steps.
Three Steps for Responsive Website Navigation
There are three steps you need to take to add a mobile menu to your header:
- Create a small JQuery file to add the mobile navigation icon
- Enqueue the jQuery file in your functions.php
- Add a responsive media section at the end of your style.css
Step 1: Create the JQuery File to Add the Mobile Menu Icon
- First navigate to your child theme folder (If you are using the Genesis Sample theme, this is /wp-content/themes/genesis-sample), and create a new folder named “scripts”.
- Copy the jQuery code below into a text editor, and save it as “header-mobile-nav.js”.
- Save it to the
/genesis-sample/scripts/folder or your child theme/scripts/folder.
jQuery( function($) {
'use strict';
// Insert mobile menu before the Genesis Header Right widget navigation menu
$( '<div id="header-mobile-menu">≡ Menu</div>' ).insertBefore( 'nav.nav-header ul.genesis-nav-menu' );
// Add .hide class to .nav-header .genesis-nav-menu to hide it for small screen sizes.
$( 'nav.nav-header ul.genesis-nav-menu' ).addClass( 'hide' );
// Toggle Header Right widget navigation menu for mobile menu.
$('#header-mobile-menu').on( 'click', function() {
$('nav.nav-header ul.genesis-nav-menu').slideToggle();
$(this).toggleClass('active');
});
});This header-mobile-nav.js code adds:
- a div with id #header-mobile-menu to create the button; it also adds an icon and the word “Menu”
- adds a class of .hide to”.nav-header .genesis-nav-menu”, so that the header navigation menu can be hidden at small screen sizes
- adds the code to toggle the #header-mobile-menu open and closed.
Step 2: Enqueue the jQuery Script
Next you need to tell your theme to use the jQuery script, so you enqueue it. You add the code below to your child theme’s functions.php.
If you’re using the Genesis Sample theme which uses Google fonts, you can add the menu enqueue line to that function, as below.
<?php
// Note: Add only code below to your functions.php
add_action( 'wp_enqueue_scripts', 'amethyst_enqueue_scripts' );
function amethyst_enqueue_scripts() {
//Add mobile button script to Header Right widget navigation menu
wp_enqueue_script( 'header_nav_for_mobile', get_bloginfo( 'stylesheet_directory' ) . 'https://g3f2z8v4.rocketcdn.me/scripts/header-mobile-nav.js', array('jquery'), '1.0.0' );
}Step 3. Add CSS
You can add the following CSS to the end of your stylesheet – style.css or to Appearance > Customize > Additional CSS.
@media only screen and (max-width: 768px) {
/* Start Header Right Widget Mobile Menu Navigation
--------------------------------------------------- */
.nav-header .genesis-nav-menu.hide {
display: none;
}
#header-mobile-menu {
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-align: center;
text-transform: uppercase;
}
#header-mobile-menu:hover,
#header-mobile-menu:focus,
#header-mobile-menu:active {
color: #333;
display: block;
}
.nav-header .genesis-nav-menu .menu-item,
.nav-header .genesis-nav-menu a,
.nav-header .genesis-nav-menu .sub-menu {
border: 0;
text-align: center;
width: 100%;
}
.nav-header .genesis-nav-menu .menu-item > .sub-menu {
clear: both;
margin: 0;
opacity: 1;
position: inherit;
width: 100%;
}
}
@media only screen and (min-width: 769px) {
/* This makes the header nav menu normal again when the browser window expands */
.nav-header .genesis-nav-menu {
display: block !important;
height: auto;
}
/* Hide Header Mobile Menu Button */
#header-mobile-menu {
display: none;
height: 0;
}
}CSS Explanation:
The first media section @media only screen and (max-width: 768px) { adds the CSS for the mobile menu for screen sizes smaller than 768px. The rest of the CSS is just to style the menu links so they all expand at once, extend the full width of the screen, etc. The second media section @media only screen and (min-width: 769px) { returns the theme to the default menu at normal screen sizes.
The code is also in the Github Gist – https://gist.github.com/mjsdiaz/9605372.
If you liked this tutorial, sign up below to get more tutorials in your email.
Some Other Notes About This Mobile Navigation Menu
- These navigation menus use text with an icon to identify the mobile menu because when I first created the menu for clients, they did not relate the three line or hamburger icon with the navigation menu, even though they all used smart phones (Apps often use the icon.)
Since then, some usability testing has also shown that many users are still not familiar with the three line icon, and other choices are recommended. You can read more about the study on Exis Web; there is also another study linked at the bottom of this reference. - This menu uses the text “Menu”, and it’s not translated, primarily to make the code easier to follow. If you need it in another language, then translate “Menu” yourself in the jQuery code before saving it. If you need a translatable file, I recommend using only the icon with a border around it per the study above.
- The HTML character
≡means “equivalent to”, so if it is read by screen readers, while it may not be technically correct, it is not the worst choice preceding the text “Menu”.
30 responses to “Mobile Responsive Header Menu for Genesis Sample Theme”
Hi Marcy,
Thank you for your interesting tutorials.
I’m trying to create a site with vertical navigation only.
(a custom menu in the left sidebar widget).
I’m using in the Genesis News Pro theme. One of my problems is that this sidebar menu is displayed below the content in responsive mobile mode. I don’t like the idea to have the same menu displayed as a primary menu also above the header.
Is there a way to have a mobile menu displayed in this situation?
Merci in advance!
Greetings from France,
Petri
You’re welcome, Petri. If you want some creative methods, there is a link to Adventures in Responsive Navigation in my previous responsive navigation menu post. You may get an idea from those examples.
I do prefer to use two menus though – a menu in the sidebar and a primary nav menu (or header menu) that uses the same menu as the sidebar. You don’t need duplicate menus, just the same menu in two locations. The primary nav or header nav is hidden with CSS at large screen sizes. Then when the sidebar drops below the content, the sidebar menu is hidden and the primary nav or header menu is displayed.
Thank you for your quick answer Marcy.
I did as you wrote and have 1 menu for the primary nav and sidebar widget custom nav. But then … I’ve been struggling with the style.css for hours but can’t make it work correctly.
I think I have 2 problems:
– The primary nav appears again if I scale the browser screen wider.
– If I scale the browser window smaller my Header text disappears (partly) below the nav bar.
Thanks anyhow!
Petri
Just a few minutes ago I saw your menus working perfectly, but now the primary nav doesn’t disappear again. Try adding this code in the @media section for when it gets larger again:
.nav-primary .genesis-nav-menu {display: none !important;
height: 0;
}
It’s the !important that makes it disappear again.
Also for your header disappearing beneath the menu, I’m not sure what’s going on there. You could try making the height of your header a bit larger at small screen sizes.
oops, sorry, I’m not using Genesis News Pro but the Magazine Pro theme.
Hello!
I am so excited about this tutorial! I completed the whole thing exactly, and it is still not showing up on my site. I have the Genesis Sample theme, so added the .js in the scripts folder, the enqueue function and the css. Any thoughts as to why it’s not working?
Thank you so much,
Ginny
Never mind! I just realized that I need your previous tutorial for the primary menu – not the header right widget. Thanks!
Yes, your nav menu is the Genesis primary nav, so you need this tutorial
Responsive Website Navigation for Genesis WordPress Themes
I hope you get it worked out, Ginny!
Thank you for the tutorial Marcy. I have seen this approach to mobile in other tutorials, but you presentation is clearest I’ve seen. It’s a simple light approach and that’s nice. Could you comment on adding the touch functionality with this approach or did I miss it? Thanks
You’re welcome, George. The
#header-mobile-menu:focus,line adds the touch functionality.Hi Marcy,
I’ve included the JS script, the functions include and the CSS to a site I’m trying to create this mobile navigation menu for.
My question is: When I open the mobile menu, it does not bump the rest of the site content down as I’ve seen before, it simple overlaps what is on screen? Is there a way to have it so when the menu opens, the content goes underneath the menu, rather than being hidden by it?
Brandon, I can’t see your site. My guess is that your theme may have a “sticky” or fixed header. This method doesn’t work for those themes. You would have to remove the sticky part.
You would have to find where your menu is using
position: fixed;and then change it to:
position: relative;Marcy thank you for the quick reply, sorry I should have been more clear. The site is not the one I listed in the comments information.
This site is not using a sticky menu, simply a header right widget area custom menu.
It looks like there is a max-height on your menu. You’ll want to change that to auto or something like that.
Thanks Marcy! Got it fixed! I appreciate your quick responses and help. I’ll be coming back and following up on your page more often. Just what I needed, when I need it!
There is reference to “2261” being displayed in front of the Menu. I’m having this _issue_ using wordpress too. Is there anywhere to remove that from being shown, or do I need to just change themes.
Thanks for stopping by, Jason.
Adding code is not working well.
Look in Step 1, at the jQuery file. Find:
&# x2261;I added a space, so it will show.
Remove that from the & to the space before Menu.
Then save it.
You can also change the word “Menu” if you like in that file.
Great article. Very useful. I am used to this style baked in with Thesis but with Genesis it is handles a little differently by default so being able to add this in easily is great. I like to use a sticky menu and so used the above to make two menus mobile responsive, as the sticky is hidden unless you scroll down beyond the header.
One other thing I like which I would love to see a Genesis specific tutorial on is the select dropdown style menu you see on some Themedy skins. That saves a lot of space. Have you tried that on any sites Marcy?
Thanks in advance.
Thank you for your comments, David. I use Genesis or sometimes a WordPress default theme, so those are the only themes I use.
Yes, I was referring more to the select style menu, and if you had tried that in Genesis. http://demos.jquerymobile.com/1.4.5/selectmenu/ and https://css-tricks.com/convert-menu-to-dropdown/
Which is another way to make a responsive mobile menu but I have not seen it specifically done with Genesis yet, but I may have a stab at it :)
Bill Erickson and Sridhar Katakam have posts about using a select dropdown menu in Genesis. If you search, you’ll find the posts.
Thanks, Marcy! Very cool post.
Thanks, Roberto!
Hi again, Marcy!
I replaced the menu character code by the font awesome . Of course, to do this one has to enqueue font awesome, if it’s not already in your website. It seems to line up better with the word “MENU” and it looks, well, awesome :)
Cheers!
Thank you so much Marcy!!
You are lifesaver… It worked perfectly. I loved the way you have explained every single step. Thank you once again
I’m glad it worked for you. Thanks for letting me know, Tejshri!
I’m new newbie in wordpress., i really dont understand how to do it..can i request? can you please make a video tutorial?.. Thank you!
A video won’t help with this tutorial; the step-by-step is better. Just take your time and read each step.
Hi Marcy,
Thanks for this awesome post.
But I have a tugging question.
Will this new set of codes override the default genesis code?
Because that is exactly what I want it to do.
You could take a look at the menu on my site if you don’t mind.
Thanks
Iyiola
This tutorial is not for your theme. Your theme already has a great responsive menu built in. Please see the note added at the top of the post.