This article will show you how to give WordPress TwentyEleven a real Mobile Navigation using the HTML5 <select></select> tags and CSS3 Media Queries.

Let me first start by saying that we will not be hardcoding anything to the WordPress twentyeleven files themselves but we will be creating a child theme for twentyeleven and implementing our mobile navigation through the child theme.

If you’ve never created a Child Theme in WordPress before, be sure to check out the WordPress Codex on Child Themes.

What you’ll want to do for this particular Child Theme is create new files for style.css, functions.php, and a javascript file.  Feel free to download the source files here and continue reading along with this article.

What we did first was create a new folder for our Child Theme.  In that folder are seperate folders for our javascripts in a /js/ folder and our images are stored in the /images/ folder.  We then create a new style.css file with the following code:

/*
Theme Name:     twentyeleven mobile navigation
Theme URI:      http://bowesales.com/
Description:    A Child Theme with a Mobile Navigation for the WordPress twentyeleven theme.
Author:         Jesse Hallett
Author URI:     http://bowesales.com/
Template:       twentyeleven
Version:        0.0.1
*/

@import url("../twentyeleven/style.css");

/* #Menu
================================================== */
nav .menu select {
display: none;
}

/* #Media Queries
================================================== */

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
/* Navigation */
nav .menu ul {
display: none;
}
nav .menu select {
display: block;
background: url('images/select-arrows.png') no-repeat scroll right center #FFF;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
padding: 5px 10px;
margin: 10px auto;
border: 1px solid #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width: 100%;
}
}

What this does is register our Child Theme with WordPress and tells it to source from TwentyEleven. Save this in your Child Theme’s root folder.

We also give our navigation select tag a display: none to hide it from our regular browsers and screen widths.  We give the navigation select some style with a Media Query and hide our regular navigation menu from our smaller screen sizes.  Keep in mind that future updates of WordPress may change the navigation class of .menu to something else.  If this happens, please update your files accordingly.

Next up we create a new functions.php file and add the following code:

<?php

/*

* @package WordPress
* @subpackage Mobile-Nav-Child-Theme-for-TwentyEleven

* Author:         Jesse Hallett
* Author URI:     http://bowesales.com/
* Template:       twentyeleven

*/

//include scripts

function my_scripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
wp_enqueue_script('jquery');

wp_enqueue_script( 'mobile-nav', get_stylesheet_directory_uri() . '/js/mobile_nav.js', array('jquery'));

}

add_action('wp_enqueue_scripts', 'my_scripts_method');

?>

With this code, we tell WordPress to register a newer version of jQuery which allows us to enqueue our new javascript file which we will create next.  Save this in the root of your Child Theme folder, where your style.css is saved.

Next up we want to create a new javascript file within the /js/ folder of our Child Theme’s root folder. We saved our file as mobile_nav.js and added the following code to it:

/*

* Mobile Navigation for twentyeleven created by Jesse Hallett http://bowesales.com
* With Special Thanks to these two lads:

* Chris Coyier's Mobile Navigation Technique
* http://css-tricks.com/convert-menu-to-dropdown/
* Article Date: 05/15/2011

* Demo Taken from Ian Yates' tutorial on Tuts+
* http://webdesign.tutsplus.com/tutorials/complete-websites/building-a-responsive-layout-with-skeleton-navigation/
* Article Date: 03/19/2012
*/

/* Mobile Navigation
================================================== */
jQuery(function($){
$(document).ready(function() {

//build dropdown
$("<select />").appendTo("nav .menu");

// Create default option
$("<option />", {
"selected": "selected",
"value"   : "",
"text"    : "Select Page" //Change default text
}).appendTo("nav select");

// Populate dropdowns with dash for child pages
$("nav .menu a").each(function() {
var el = $(this);
var padding = "";
for (var i = 0; i < el.parentsUntil('div > ul').length - 1; i++)
padding += "&ndash;";
$("<option />", {
"value"   : el.attr("href"),
"html"    : padding + el.text(),
}).appendTo("nav select");
});

//make responsive dropdown menu actually work
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});

});
});

We’d like to mention here that this code was sourced from Chris Coyier’s mobile navigation technique and Ian Yates’ additional techniques from Tuts+. We added in our own bit of code to extend a dash to the links for child pages in the drop-down menu.  Have a look at the images to see what we just created!

We’ve also included an /images/folder in the root of our Child Theme folder and saved an image in there called select-arrows.png. With this image we are able to style our <select> tag to display some custom arrows.  This is great to further customize your mobile drop-down menu and adds a bit of finesse to your mobile navigation (although Firefox disagrees).

Don’t forget to download the source files and include them in your next TwentyEleven Child Theme project!

We hope you enjoyed this post on how to Give WordPress TwentyEleven a Mobile Navigation.  If you have a question or want to comment,  share your thoughts with us below.  Remember, We’re here to help!  Bowe is a Toronto based web and graphic design company that offers affordable website design packages which allow you to manage your business online easily.  We create user friendly websites and connect you to your social media.  Feel free to ask us a question below or contact us directly.