(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”.
Leave a Reply