WordPress tutorial: Create a minimal mobile menu

This menu is inspired by the awesome Treehouse tutorial. Check it out if you’re looking for a static, html/css menu!

Getting started

As we’re using WordPress, the first thing we have to do is to create a menu. You can use an existing menu from your blog, but I recommend creating a specific menu, since you might want to feature only the most important sections of your website in its mobile version.

Right on, login to your WordPress dashboard and navigate to “Appearence” → “Editor” and edit your theme’s functions.php file. We first have to create a new menu location. Here is the code to register a menu location named mobile-menu:

add_action( 'init', 'register_my_menu' );

function register_my_menu() {
        register_nav_menu( 'mobile-menu', __( 'Mobile Menu' ) );
}

If your theme already has one or more menu location(s), you should use the register_nav_menus() function instead. This function works the same as register_nav_menu() but allows you to register multiple menu locations at the same time. Here’s an example:

register_nav_menus( array(
	'main_menu' => 'Main Navigation Menu',
	'mobile_menu' => 'Mobile Menu',
) );

After registering the new menu location, you now have to edit the header.php file and paste the following code where you want your mobile menu to appear:

<nav id="mobile-menu">
    <a href="#" id="menu-icon"></a>
    <?php wp_nav_menu( array( 'theme_location' => 'mobile-menu' ) ); ?>
</nav>

Now, go to “Appearence” → “Menus”. Create a new menu named “Mobile Menu” and add a few pages/links into it, as shown in the picture below:

Once the menu is created, assign it to the Mobile Menu location.

Basic CSS

We don’t want our menu to be shown by default, but only on mobile devices. What we have to do is pretty simple, hide the menu by default by using the display css property.

The declarations I’ve put between comments are the ones I used as basic stylesheet on the demo, but you won’t need them if you implement this code into an existing WordPress theme.

The code below goes straight to the style.css file used by your WordPress theme.

/* body{ font-family: Arial; font-size:15px; color:#555} */
/* header, main{ width:900px;margin:0 auto;} */
/* header { position:relative } */
#mobile-menu{ display: none }

Adding Media queries

As we’re building a mobile menu, we just want it to be visible for smaller devices. Indeed, we have to use a media query to target devices with a screen width smaller than 767 pixels. Here’s the code:

@media only screen and (max-width: 767px) {
header, main{ width:90%}
	
	/* mobile menu */
	#mobile-menu{ display: block }
	
	#menu-icon {
		width: 40px;
		height: 40px;
		display: block;
		background: #7AD03A ;
		float: right;
		margin-top: 10px;
		text-indent:-9999px
	}

	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 20px;
		background: #7AD03A;
		right: 0px;
		top: 35px;
		width: 50%;
		border-radius: 4px 0 4px 4px;

	}

	nav li {
		list-style-type:none;
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}

	nav li a{ color:#fff !important; text-decoration:none !important; display:block}
	nav:hover ul { display: block; }

	}
	
}

If you save the modified files and have a look at your menu, it should already look pretty good. But wait, we’re gonna enhance it even more.

Using an icon font embedding to style the menu

Remember last week when I talked about using icon fonts instead of images? Well, today is definitely the right day to put that knowledge into practice.

In this example, I’m using the amazing MFG Labs font that you can download for free here. If you’d like to use another kit, feel free to browse this collection that I’ve compiled a few weeks ago.

Let’s go: download the MFG Labs Font, unzip the archive and upload the fonts and stylesheet to your server, in your theme directory. Then, open your header.php file and link to the stylesheet:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/mfglabs_iconset.css">

Now we have to modify a bit the code we wrote previously. Open your header.php file and look up for the following line:

<a href="#" id="menu-icon"></a>

Replace it by:

<a href="#" id="menu-icon"><i class="icon-list icon2x"></i></a>

The last thing we have to do is to tweak our css code a little for the icon to display nicely. Open your style.css file and look up for this:

#menu-icon {
	width: 40px;
	height: 40px;
	display: block;
	background: #7AD03A ;
	float: right;
	margin-top: 10px;
}

… and add the three declarations below:

text-align: center;
color: #fff;
text-decoration:none;

Save the files, and your menu is ready. Looks cool, doesn’t it?