Mobile Responsive Header Menu for Genesis Sample Theme

Share

mobile header navigation for genesis theme
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 demo of the responsive Genesis header menu has been added to the previous menu demo for the latest Genesis Sample theme. 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:

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

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

add jquery file to scripts folder

  • 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">&#x2261; 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

//* Enqueue Lato Google font
add_action( 'wp_enqueue_scripts', 'genesis_sample_google_fonts' );
function genesis_sample_google_fonts() {
	wp_enqueue_style( 'google-font-lato', '//fonts.googleapis.com/css?family=Lato:300,700', array(), CHILD_THEME_VERSION );
	
	//Add mobile button script to Header Right widget navigation menu
    wp_enqueue_script( 'header_nav_for_mobile', get_bloginfo( 'stylesheet_directory' ) . '/scripts/header-mobile-nav.js', array('jquery'), '1.0.0' );
}

If your theme does not enqueue any other scripts, then you will need to add a new function to your functions.php, 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' ) . '/scripts/header-mobile-nav.js', array('jquery'), '1.0.0' );
}

Step 3: Add Styles for the Mobile Menu

Next you can add some CSS for the mobile menu to your child theme style.css. For this example, the mobile menu is used for screen sizes of 768px (iPad portrait mode) and smaller. This CSS can usually be added at the very end of your child theme style.css. And, of course, you can add your own styles to the menu.

@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;
	}

}

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.

You can view the demo of the Genesis mobile responsive menu on the Genesis sample theme.
The code is also in the Github Gist – https://gist.github.com/mjsdiaz/9605372.

If you liked this tutorial, sign up in the sidebar 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 &#x2261; 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”.

Comments

  1. Petri says

    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

    • says

      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.

      • says

        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

        • says

          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.

  2. says

    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

  3. George says

    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

  4. says

    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?

    • says

      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;

Trackbacks

Share Your Comments

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>