How to Give WordPress TwentyEleven a Mobile Navigation
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 += "–";
$("<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.





Hello. I love your technique. It’s just what I’ve been looking for. However, for some reason, at mobile sizes I am getting both the regular and select menus.
My site is not live. It is local on wamp server. I’m afraid to make it live with this possible problem. Do you have any ideas?
Thank you so much.
Hi Meg,
If you’ll look at my css and js files you’ll notice I added this mobile menu to the a nav selector and a div with a class of menu (nav .menu ). This is what WordPress uses for it’s default menu. If you’ve gone into the Dashboard and created a custom menu in Appearence > Menus you’ll have to change this selector to the id and class you’ve given to the custom menu you created. For example, let’s say we gave this navigation a menu name of “main menu” we would then have to change our css and js files to match this selector of “.menu-main-menu-container”
It’s a bit tedious and if you change your menu name you have to change your source files as well, but it’s a work-around.
I hope this helps! Thanks for your comment.
Thank you! I understand.
This script is fantastic, thank you so much! I want to know how to make a small change, I would like to create entries in the mobile menu different menu by default, as you can make this thing? I installed the script in my test areas: http://www.netboss.it/android/
thank you very much
Hmm… Not too sure if that’s possible since the script is only reading the menu it’s told to.
and can set it to read another menu?
If I’m understanding you correctly, you’d have to add a new function to the javascript file and call the menu you created within WordPress.
Thanks very much – I’m playing around with this on my local server now and it works very well!
Best wishes
Simon
Thanks for this – works a treat!
Rob
Howdy,
Small issue, I’ve just updated to WordPress 3.5 and it seems to have messed up this little bit of code. Instead of hiding the man nav when the browsers goes mobile it leaves it sitting above the newly created mobile menu. Any ideas? I had a poke around and couldn’t figure it out…
Get guide
I didn’t have a problem with the upgrade so I’m not sure what exactly it is you’re looking at. But it sounds like you just need to find what WP declares the as new navigation item in the HTML and append that to your media query and js file. Similar to the above questions. Thanks for the comment, I hope this helps.
@Luke, I found that making the following change to the proposed style.css accomplished hiding the original menu nav under WP3.5.
nav .menu li {
display: none;
}
@BOWE, This works well, thank you. However, it breaks the previous/next links for navigating individual posts. Any ideas about how to re-enable those?
I found a fix to the broken previous/next links, which was only a problem on smaller screen widths. Add the following to your style.css of your child theme:
/* #Fix single post navigation on small screens
================================================== */
@media (max-width: 650px) {
#nav-single {
position: relative;
}
}
Kit, thanks for the comments! Very useful info.
Hi!! Thanks for this!!!
I can resolve that problem:
“…..If you’ve gone into the Dashboard and created a custom menu in Appearence > Menus you’ll have to change this selector to the id and class you’ve given to the custom menu you created. For example, let’s say we gave this navigation a menu name of “main menu” we would then have to change our css and js files to match this selector of “.menu-main-menu-container”…..”
Adding that in mi css:
nav .menu {width: 100%;}
nav .menu li.menu-item {
display: none;
}
and you can use it with all your custom menus
Regards!!
Hi. I love your website. I have a blog on twenty-eleven and though I ‘fiddle’ around with the code, this is way over my head. My understanding is that this theme is nonessential responsive.Is that the case?
And if not, would it be better to switch over to Brunelesci or Ari, etc? or get a plug-in?
Trying to make my work fit on all screens without blowing up the page
Hi, Thanks for the compliment. Have you seen TwentyTwelve? It’s a pretty nice theme with a responsive layout.