How To Build a Collapsible Responsive Menu for Genesis

Most premium WordPress theme builders that offer responsive themes are lacking user-friendly navigation. Most premium WordPress theme builders simply stack the menu when their themes are viewed on smartphones.

I’m not a fan of that stacking the menu upon page load because it takes up valuable space on the screen. Forcing a user to scroll to read your article is a poor user experience.

A classic case of the header and navigation taking up too much screen space can be seen on the Agency theme from StudioPress. Note: I’m a huge fan of StudioPress, but not everyone is pixel-perfect. Including me!

The Agency theme is responsive and a great skin, but I’m not a fan of the menu system. I feel that it can be improved upon.

Responsive Menu Choices

I’m seeing two trends in creating menus using responsive web designs.

Select Boxes — Many premium theme builders are changing their menu to be a select box once the screen-width decreases to a specific width. That solution is better than simply stacking your menu, but I’m not a fan.

The two images below demonstrate a responsive menu using the select box. The first image illustrates how the navigation looks when you’re not interacting with the menu. It’s unobtrusive, yet is not (in my opinion) what I think users are expecting to see when navigating a website.

The second image illustrates what happens once the user engages with the responsive menu. I don’t think this provides an optimal navigating experience.

When browsing the internet on your desktop computer, how many times have you seen the navigation of a website built using a select box?  Probably zero. On a desktop computer, users are familiar with either seeing a text-based menu system or an image-based menu system. I think that once a user is on a tablet or smart-phone, it’s not natural for them to have to think about how to navigate a website. Training them to look for a select box is silly.

Collapsible Menu — The second option I’m seeing used to save screen real estate and provide a user-friendly navigation system is to use a collapsible menu. What I’m seeing is a basic icon shape (thank god for standards) of three horizontal lines being used to indicate the presence of a menu/navigation item on the screen.

Let me show you three examples and tell me if you can spot a trend.

iPhone Reminders:

Google Chrome on the iPhone:

YouTube on the iPhone:

Smart-phone and tablet users are already familiar with the three horizontal lines which indicate the presence of a menu or navigation. Why go against the flow and use a select box?

I think the three horizontal lines (responsive menu icon) is the best option and is what I’m using on my website. Go ahead and shrink your browser and watch the menu icon appear once you reach the proper size. To get this to work on my Genesis child theme took less than 10 minutes and requires zero Php coding. Ready to get started?

How To Implement a Responsive Menu in 10 Minutes

A summary of the code below: You will place a mobile responsive menu icon into your website’s navigation and initially it’s hidden. If a user of your website is viewing your site at a predefined width or smaller, your desktop menu is hidden and your mobile responsive menu icon appears. When a user clicks on the mobile menu icon, jQuery will toggle the menu to then show your full menu.

Take note of a couple things before you start.

• My implementation and tutorial caters to those web developers using the Genesis Framework. It will work with any WordPress theme, but I’ve detailed some information below catering to Genesis. More thinking on your part is required if you’re not using Genesis.
• The other very important thing to note is that in my example, I’m using a custom menu within the header widget. I’m pointing this out to you since your CSS ID and Class Selectors will probably differ from mine in the code below. The CSS selectors I’m referring to is: #menu-primarynavigation and .menu.

1. Place the code below into your theme’s CSS file that’s not inside of a media query.

#mobi-menu {
	display: none;
	visibility: hidden;
}

2. This next piece of CSS needs to be inside of a media query. I’ve chosen to switch to the mobile menu icon when the max-width of a browser is 400px.

@media only screen and (max-width: 400px) {
#mobi-menu { background: url("images/icon-mobile.png") no-repeat scroll 0 0 transparent; cursor: pointer; display: inline-block; 	float: right; height: 30px; margin: 12px; width: 41px; visibility: visible; }
#nav_menu-2 { display: none; }
}

/* Make sure main menu re-appears when scaled up */
@media only screen and (min-width: 401px) {
	#nav_menu-2 {
		display: block !important;
	}
}

The CSS styles mentioned above will get things working. Your homework is to style it properly for your particular implementation.

Now the jQuery…

Place the code below into your site’s head section. I’m using a Genesis child theme so I went to Genesis -> Theme Settings and placed the code into the “Header” scripts section.

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
	/* prepend menu icon */
	$('#title-area').append('<div id="mobi-menu"></div>');

	/* toggle nav */
	$("#mobi-menu").on("click", function(){
		$("#nav_menu-2").slideToggle();
		$(this).toggleClass("active");
	});
});
// ]]></script>

Grab my mobile menu icon here. Save it to your themes ‘images’ folder. If you save it elsewhere, you’ll need to adjust the code above.

Save everything and re-size your browser. BAM! You now have a responsive menu in less than 10 minutes.

As a reminder. You will have to style everything according to how you want everything displayed on your website.