WordPress tutorial: Create a minimal mobile menu

I already said it before, but nowadays websites have to be easy to use on mobile devices such as tablets and smartphones. Navigations menus are definitely an important part of a website, but sometimes it can be tricky to make a resposive, mobile menu. Here's a tutorial on how to create a pure css mobile menu for your favorite WordPress theme.


There’s a demo available for this tutorial, click here to see.

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

WordPress Mobile 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?

  • Mike

    Hello, The menu opens fine on mobile phone, but the menu does not close on mobiles. How can this be fixed ?

    • Hey Mike, the menu works perfectly. To close it you just have to tap anywhere else on the screen.

      • Mike

        Hi, thank you for the reply. The menu closes when you view on desktop, but when viewing on iphone the menu does not close when you click anywhere on screen. Thx

        • I don’t have an iPhone, so I can’t test it, sorry. However if you find a fix please share so I’ll update the post.

  • Is it possible to make multilevel menus from this technique?
    as I know Bootstrap doesn’t support multilevel menus

  • MAzZY BiG

    Please check your code:

    mobile_menu – for functions.php
    mobile-menu – for header.php

  • mrs sarigu

    I have tried to make the menu. But just for page menu, if I choose a category, it will not appear on the menu. šŸ™