Navigation for Mobile

The navigation bar often becomes an issue when creating a responsive theme. As the width of the browser window shrinks it gets harder to fit it across the top, and the text and clickable area get smaller and smaller. If we keep them large and organize the navigation tabs in columns they push the content down. There is an alternative, however. We can place a simple menu button at the top. Click it and it expands to reveal the menu tabs. Click it again and the navigation items disappear
To do this, open your header.php file and add the ‘Menu’ title just inside your nav tag.

<nav id="access" role="navigation">
     <h3 class="mobile-menu">Menu</h3>

Be sure to give it a class name so that you can turn its display off and on from your style sheet.

In normal web view we don’t want it to display, so lets add the following to your style.css file

.mobile-menu {
		display:none;
	}

However when the browser is smaller than 600px we want it to show and look like a clickable button.

@media (max-width: 650px) {
       .mobile-menu {
		display:block;
		width: 50px;
		margin: 0 auto;
		background: #fff;
		text-align: center;
		cursor:pointer;
		position: relative;
		top: 5px;
	}
}

Add any extra styling you like so you have a nice looking button.
At this point we want to see the button but we don’t want to display the actual menu choices. So lets turn it off. Within the @media (max-width: 650px) braces add:

        #menu-top-menu {
		display:none;
	}

‘#menu-top-menu’ is the id my navigation ul had, yours is probably different and you’ll have to change it accordingly.

Now, how do we make the button clickable and get the menu to display on click?

Create a folder with the title ‘js’ in your theme folder (or if you already have one, use that) and create a new file with the title ‘navigation.js’. Paste the following bit of jQuery into it.

jQuery(document).ready(function($)  {
    $(".mobile-menu").click(function() {
	  $(".menu").toggleClass("toggle");
	});
});

Then enqueue the script in your functions.php file to make wordpress take notice of it:

function add_scripts() {
	if (!is_admin()) {
		wp_enqueue_script('jquery');
		wp_register_script('navmenu', '/wp-content/themes/mytheme/js/navigation.js');
		wp_enqueue_script('navmenu');
	}
}
add_action('init', 'add_scripts');

The jQuery script does the following: when someone clicks the ‘Menu’ button (which has the class of ‘mobile-menu’), the navigation ul (which has a class of ‘menu’) gets an extra class, ‘toggle’, added to it. So when the page loads, the navigation ul only has the class ‘menu’ and it is hidden. When someone clicks, it gets the class ‘toggle’ and we will now tell ‘toggle’ to appear on the page and form a column of navigation items under the menu button.

In your style.css, within @media (max-width: 650px), add:

#menu-top-menu.toggle {
		display: block;
		width: 130px;
		background: #ddd;
		margin: 0 auto;
		text-align: center;
		position: absolute;//this allows the navigation to overlay the content of the page
		top: 8px;
	}
#menu-top-menu.toggle li {
		float:none;
	}

Your menu should now toggle off and on as you click the menu button. Add any other styles you like to make it look nice.