I have been testing the new Twenty Twelve responsive WordPress theme. It’s very nice but I don’t like the way the responsive menu works. So I figured out how to replace the existing menu with a Select list.
Currently, when you view 2012 on an iPhone, you get a Menu button. If you click the menu button, the whole menu expands below the button and has no hierarchy. It’s simple. It’s clean. And it’s clunky if you have a large menu with pulldowns. The image below shows the default Twenty Twelve responsive menu on the left and the responsive select menu on the right.
To add a responsive select menu to Twenty Twelve
The following procedure explains how to add a select menu to the WordPress 2012 template. I used the SelectNav.js script to make this modification. You can find instructions and a github file link on this site.
- Install the Twenty Twelve theme if you don’t have it. You can download it here.
- Create a child theme for 2012. To do so, create a new folder in /wp-content/themes/
called twentytwelvechild. You can call it whatever you like, but for this tutorial, I’ll use twentytwelvechild.
Click here for a detailed and excellent explanation of how to create a child theme. - In your twentytwelvechild child folder, create a file called style.css and add the following code:
/* Theme Name: Twenty Twelve Child Theme URI: http://example.com/ Description: Child theme for the Twenty Twelve theme Author: Your Name Author URI: Your URL Template: twentytwelve Version: 0.1.0 */ @import url("../twentytwelve/style.css"); - In your twentytwelvechild child folder, create a file called functions.php and add the following code:
<?php ?>
- From WordPress admin menu, select Appearance > Themes. You should see the Twenty Twelve Child theme you just created. Click Activate. Now, the Twenty Twelve Child theme should be your active theme.
Zeaks says
Thanks for the tutorial, it worked great. Just one thing I noticed, why queue the .js from the parent directory if using a child theme?
Use get_stylesheet_directory_uri() and the selectnav.js can be kept inside the child theme folder.
Pat Fortino says
Zeaks. Glad it worked for you. Also, I changed the tutorial so it uses
get_stylesheet_directory_uri()instead ofget_template_directory_url(). Thanks for that reminder.Zeaks says
One more quick question. This worked perfect on my test site, but when I tried to add it to my main site the menus would not display.
It took me a minute to figure out it was the menu names. It needs to be named “Top Menu” in appearance > menus.
Is there a way for it to pick up an ID or class that’s used in the header.php?
EX: I have 2 menus, in header.php the top one is
<nav id="site-navigation"
the bottom is
<nav id="lower-navigation"
I tried using lower-navigation in the .js file but that didn't work.
Pat Fortino says
If your lower nav ul has a class or id, use that in the javascrip. See this page for an example of a page that uses 3 responsive menus: http://lukaszfiszer.github.com/selectnav.js/
Zeaks says
It has a class and I have it working, but that isn’t the issue. I have to name my menu to match the class used in the javascript in order to get that class name.
// custom script for twentyeleven menu-top-menu class
selectnav(‘menu-top-menu’, {
Just thought there might be an easy work-around so my menu name could be anything without having to worry about what it’s called in the javascript.
Pat Fortino says
You can add a second or third etc menu to the script at bottom; eg,
selectnav(‘menu-top-menu’, {
label: ‘Menu’,
nested: true,
indent: ‘-‘
});
selectnav(‘menu-top-bottom’, {
label: ‘Menu’,
nested: true,
indent: ‘-‘
});
Zeaks says
Sorry for all the comments. I probably didn’t explain that very well. Forget about my new menu area.
The ul class is dependent on the menu name (in appearance > menus).
If I name the default menu “blahblah” then the class changes to menu-blahblah-menu, instead of menu-top-menu, so I’d have to also change it in the JS.
That’s not a big deal for my own site, i can easily change my menu name. But the .js code will only work for users that have specifically named their menu “Top Menu”
I was looking for a way too use a hardcoded menu ID in the .js so it wasn’t dependent on what the user decided to name their menu.
Pat Fortino says
I don’t know how to make it more integrated with wordpress. Let me know if you figure out a way.
Albin says
//element = document.getElementById(element);
element = jQuery(“.nav-menu ul”).get(0)
zeaks says
I think I figured it out. It was just a matter of adding a new constant menu ID.
In header around like 42 the menu call reads
wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) );
Adding ‘menu_id’ => ‘top-menu’ to it like this creates another ID for that menu.
wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’, ‘menu_id’ => ‘top-menu’ ) );
(removed the php tags so it could post in comments)
Thanks again for the tutorial and replying to all my comments
Iurie says
zeaks, I can’t implement your solution, it not worked for me. Do you tried it on Twenty Twelve?
Kristin says
Hello! I’m trying to implement this select menu to my twentytwelve child theme. The problem I’m having is that when I test it on my smartphone (or in a narrow browser window) the entire menu/nav disappears. I’ve checked to confirm that I have the right menu name in the js and css – but I just can’t figure out the problem. Do you happen to have any ideas? Thank you!
Pat Fortino says
Make sure the selectnav.js file is getting loaded. Also, use look at the javascript console to see if you see any errors related to the menu.
Kristin says
Thanks for responding. I was able to get it to work, the js file was in the wrong place. Thanks for posting these instructions, they are really helpful!
Pat Fortino says
Glad you got it to work.
Pat Fortino says
Kristin, I figured out the problem: I just tested the procedure and figured out the problem. You need to change the code on step 15 from this:
/* small screen */
@media screen and (max-width: 600px)
.js #menu-top { display: none; }
.js .selectnav { display: block; }
}
to this:
/* small screen */
@media screen and (max-width: 600px) {
.js #menu-top { display: none; }
.js .selectnav { display: block; }
}
The difference is I added a curly bracket after (max-width: 600px) {
Nim says
Thank you very much for your tutorial. For max-width of 600px, everything is perfect on my page, but my problem is that on a wider width I have two menu bars: the old one along with the new one!! Can you tell me how can I get rid of the new one (for responsive page) on desktop mode?
Thank you,
Pat Fortino says
Hi Nim, I just tested the procedure and figured out the problem. You need to change the code on step 15 from this:
/* small screen */
@media screen and (max-width: 600px)
.js #menu-top { display: none; }
.js .selectnav { display: block; }
}
to this:
/* small screen */
@media screen and (max-width: 600px) {
.js #menu-top { display: none; }
.js .selectnav { display: block; }
}
The difference is I added a curly bracket after (max-width: 600px) {
Simon says
The curly bracket fixed it for me too, thank you.
Simon says
Hi, I managed to get the menu to display no problem on an iPhone however the new menu is still displayed on my desktop browser underneath the main menu. Is this how it is meant to be displayed?
How do I hide the new drop down menu on the desktop? I’ve tried changing the max-width in the last bit of code with no success.
Also when closing out of the responsive menu by pressing done the website display stays zoomed on the iPhone. Is there an easy fix?
Any help would be appreciated!
Pat Fortino says
Looks like you have some script for copyright. Maybe that is messing with the menu script since I can’t see the select menu on the page code.
Matt says
Hi! What happens to the menus on iPads and 7″ tablets like nexus, etc…?
Pat Fortino says
Should work on any device.
Matt says
Where do I add:
// custom script for twentyeleven menu-top ID
selectnav(‘menu-top’, {
label: ‘Menu’, nested: true, indent: ‘-‘
}
);
Matt says
Nevermind, I got it.
Iurie says
Thanks for the tutorial, it worked great! I have only one question: is it possible to wrap long menu items?
Iurie says
I just discovered that the new responsive menu is appearing all the time, not only on the small screens. What is wrong?
Pat Fortino says
I would go through the tutorial again. You probably missed a step.
Iurie says
I checked all steps, the problem is still there. I have now, as Simon, two menus.
Pat Fortino says
Hi Lurie, I just tested the procedure and figured out the problem. You need to change the code on step 15 from this:
/* small screen */
@media screen and (max-width: 600px)
.js #menu-top { display: none; }
.js .selectnav { display: block; }
}
to this:
/* small screen */
@media screen and (max-width: 600px) {
.js #menu-top { display: none; }
.js .selectnav { display: block; }
}
The difference is I added a curly bracket after (max-width: 600px) {
Iurie says
Now is OK! I’m surprised I haven’t seen this error! I checked the code several times but have not seen it! Thank you!
How about to resize the drop-down-menu for very small screens? When menu items are long it has a larger width than the screen width.
Iurie says
An edit of the the previous message:
On screens smaller than 320px the new responsive menu has a larger width than the screen width.
philip says
Howdy, this is extremely helpful. Only one issue on my end:
I have a category which is essentially a place-holder… it reads “current clients”, in the 2012 menu, it is not an option to click on, it merely loads causes the list items to appear. I only have one category… unfortuantely, with the responsive menu, the category and the list appear…. is there anyway to make only the list items appear and not the parent category? (i.e. in my case, the empty parent)?
Thanks in advance this is very helpful!!!
Philip says
Got it to work! Simply delete the following from the java code:
// adds label
if(level === 1 && label) {
html = ” + label + ” + html;
}
joel says
Pat, thanks so much for sharing your knowledge, this is a great little tutorial that fixes one of my biggest anxieties about the 2012 theme.
Martin says
Thank you for this tutorial – I’ve been searching for this for ages and now the problem is fixed for me. I do have the same question as Philip (jan 18th) – and have implemented his solution, but the ’empty parent’ item (as he calls it) still appears on the menu and is clickable.
Any ideas would be great.
Thanks again for a great post
Lukian says
Works like a charm.
This is the first time I use a .php and a .js file, having been active for some 10 days only, and this worked just fine.
Thank you!
tim says
Firstly thank you, the menu works great as soon as i reduce my browser size, but the original menu and sub menus are displayed without the drop down’s, all the menu items are there but take up 5 rows….
I might give it another go tomorrow (Knackered) fresh head can make all the difference.
Pat Fortino says
That’s the way the twentytwelve menu works. It’s supposed to be that way. It’s a pretty common method for squeezing horizontal menus in responsive layouts. It’s even better if you don’t have drop downs. But to change it, you’ll have to do extensive css coding. You could shrink the width/padding, etc of each item so the menu does not wrap. If you’re good with css, it should be too bad.
Tim says
Thanks for the quick response, I did not explain it very well, I realize that the menu wraps, The issue I am having is the menu loses its drop downs and then wraps because the sub menus are not dropdowns.
Cheers Tim
Pat Fortino says
Looks to me like you site does not have drop down menus.
Tim says
How Ridiculous…….
When creating the new menu, I ticked all the pages and added them, fine! then the sub categories I pulled to the right and sub subs a little more to the right…….. Well this does not work !, you have to drag and drop ontop of the category to create the sub category…LOL
Next Make it look pretty……….
All Working Thanks Pat,
Pat Fortino says
Glad to hear it was that simple. I thought maybe you’d already arranged the menu items and that it was a bug in the 2012 menu code. Sometimes it just takes a nudge.
Tim says
I had arranged them, and saved them, and they stayed in place when I went back, but it was when I dropped them ontop of the menu item I wanted it to be a sub of then it worked, as per this video http://www.youtube.com/watch?v=Ow69SNWTp3U&feature=youtu.be
Tim says
I have breadcrumbs on my site, so after the menu was selected or if someone lands on a page that is not my homepage I wanted the menu to still state “menu” so people will realise that it was the navigation.
I have achieved this commenting the lines 113 – 115 on the selectnav.js……
//if(autoselect && !isselected){
//isselected = link.href === document.URL ? selected : ”;
//}
Ben says
Thanks for the tutorial, I got it working perfectly! Is there a way to style the drop down menu so that it stretches on an iPhone edge-to-edge, rather than being a small menu in the middle of the screen. For example: http://f.cl.ly/items/152N2K152i3r0v3d1X3d/Screen%20Shot%202013-03-01%20at%2011.00.37%20AM.png Thanks in advance.
Pat Fortino says
I think select menus are as wide as the widest item in menu. You could try adding a min-width or padding to select menu css to make it wider.
Michele says
Hi, Will you please tell me where I am to put the html code for the lists? I’m not programmer and my first two guesses were wrong. Thank you
andrew says
Hi there great tutorial Pat!!
One question I have if you look at my site I have got the drop down working but it does not look as good as the one you have in your screenshot is that just for Iphones or should it look like that for all devices?Or is there extra CSS needed?
Can you check my site for me please ?
http://www.gofunhill.org
Thanks
Pat Fortino says
Your menu looks fine to me. In order to see an iphone style menu, you need to view it on an iphone.
andrew says
Hi Pat ,
Thanks very much I do not have an Iphone so could not test it
Just one more question though the menu works perfect in google chrome , firefox and most phones but does not seem to work in Internet Explorer or windows
Is there a hack or a fix for this?
Pat Fortino says
Not sure that it matters that it doesn’t work in IE since it’s really for mobile devices.
Mark says
Great looking tutorial, I’m going to try it out tonight. Have you considered wrapping up all of this into a plugin? I wonder if that’s possible…
There are some decent plugins out there that handle responsive nav menus better than the out-of-the-box twentytwelve implementation, but I’m still looking for the simplest, most elegant solution.
Callum Giles says
Hi,
I’ve followed all the steps in this guide, and it’s working, but the original menu remains. Any tips? My site is http://callumgiles.com/.
Pat Fortino says
If the menus is still there then you forgot to add the CSS to hide it
Callum Giles says
Thanks for your reply.
I have this at the bottom of my child stylesheet:
/* Code to hide the default responsive menu and menu button */
h3.menu-toggle {display: none;}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {display: none;}
/* new responsive selectnav css */
.selectnav { display: none; }
select.selectnav {margin:0 auto;} /* centers select */
/* small screen */
@media screen and (max-width: 600px) {
.js #menu-top { display: none; }
.js .selectnav { display: block; }
}
Marta says
Very nice and helpfull! Thx a lot.
Splendid Angst says
How could I use what you’ve explained here to add this to a different theme?
I’ve been at this all trying different solution and I’m just trying to be done with it already lol.
Pat Fortino says
You’d have to see how the theme generates the menu and what ids or classes it uses and then adjust the script and instructions for the differences.
Rikard says
Hi, thanks a lot for the tutuorial. Been looking for a solution for ages now…I got it to work as far as it removing the original menu, but Im having problem with the new menu showing on all pages. Now its only showing on pages that doesnt exist (!). Could anyone point me in the right direction?
Cheers,
Rikard
Rikard says
…and right after asking the question I found the answer: I had removed the get_footer(); from all my pages except the not_found.php or whatever its called. So new question: how come it doesnt show when the get_footer(); is not included?
mark says
Hi Pat,
I followed your instructions, but I find the menu disappears.
I am using WP total cache with CDN, but updated it all.
could you tell me where am going wrong?
Pat Fortino says
I checked it. It works for me on chrome.
mark says
yeah I got it working , stopped the JS from minify. in total cache plug in.
cheers
Matt says
This didnt work for me at all, the only change I can see is it removed the ‘menu’ button.
Ive gone over all the instructions and still have the same results. Im thinking that i must have conflicting issues somewhere.
Any pointers would be great,
Matt
Pat Fortino says
the selectnav.js script is corrupted; it full of strange characters. Did you edit it with a wordprocessor? You can edit only with a text editor like Mac TextEdit or Windows Notepad or something similar.
Matt says
ok Pat, il have a look at that, I did save the file with Notepad but im not sure i used the correct encoding, I saved it as ‘Unicode’.
Il play around with it and thanks for the quick response and more importantly, your time with sharing such scripts.
Matt
Matt says
Hi again,
I have saved the file as a .js from Dreamwaver and uploaded that but there is no change on the site :-(
any other ideas?
Pat Fortino says
the selectnav.js is corrupted; it’s full of japanese characters. You need to replace it with clean code.
Matt says
Thanks for that, I looked at the js file on the browser and have now fixed the issue.
The resposive menu is now appearing on my site with a reduced browser window and on mobile devices, but the original links from the main menu are still listed, even though the ‘menu’ button has gone.
any ideas?
Mariano says
Hi, it doesn’t work for me. I followed all the steps and also changed my menu name to match your guide but nothing.
I checked the source once page is loaded and i can’t find anything about ‘selectnav.js’…could this be the problem?
Thanks for your help
Mariano says
Actually, the only thing that happens is that the menu disappears…
Chaz Scholton says
Thanks for having shared this on LinkedIN. I’m currently using the 2012 theme on my iDude.net site. I’ve been slowly hacking away at modifications to the theme as time permits. This was one of the big issues a client of mine pointed out when visiting the site on his mobile device. I have to agree, the stock menu is rather clunky and not very mobile friendly.
This modification is next on my list. I’ve been trying to keep everything clean and simple.
Daniel says
Can you help me? I did everything you said but it didn’t work. It works fine at the PC but in the smartphone the menu disappeared. What am I doing wrong and how to fix it?
The site is http://relatosdetoreador.tk
Thanks a lot.
Pat Fortino says
I can see the menu on my iphone.
Daniel says
Yes I found it in another website how to do it, but thanks anyway!
Zizzu says
Hello, I’m trying to use your tutorial, but I can’t obtain 2 working menus on my test site (you can check on http://mayola.globula.net )
The two menus I created on my child theme disappear on small devices…
I used another tutorial to create a footer menu with this code:
// de-queue navigation js
add_action(‘wp_print_scripts’,’tto_dequeue_navigation’);
function tto_dequeue_navigation() {
wp_dequeue_script( ‘twentytwelve-navigation’ );
}
// load the new navigation js
function tto_custom_scripts()
{
// Register the new navigation script
wp_register_script( ‘lowernav-script’, get_stylesheet_directory_uri() . ‘/js/navigation.js’, array(), ‘1.0’, true );
// Enqueue the new navigation script
wp_enqueue_script( ‘lowernav-script’ );
}
add_action( ‘wp_enqueue_scripts’, ‘tto_custom_scripts’ );
// Add the new menu
register_nav_menus( array(
‘primary’ => __( ‘Top Menu (Above Header)’, ‘tto’ ),
‘secondary’ => __( ‘Lower Menu (Below Header))’, ‘tto’),
) );
any suggestion?
Pat Fortino says
I’d recommend getting it to work with one menu and then add the other
Chev says
OMG I am about to throw my computer out of the window. I am not using 2012 theme however I came across your informative article while searching for a solution. I have the navigation working on a test site, except for one tiny drink inducing problem. The navigation drops down and shows ONE line with all the menu articles in a singular line.
Clicking on it simply takes you to a 404 with the URL as undefined.
Have you come across this at all?
I know that my normal css isnt causing any issues as the #nav is renamed to .selectnav. I have some simple styling applied but even without it, it is the same, just uglier lol.
If you have any ideas I would be greatly appreciative.
Pat Fortino says
do you have a link to your site?
Chev says
http://2dragons-playground.net/demosites/responsive/
so, I have narrowed it down. It works if I manually type in Line whatever so I know the css and java is working. Therefore, I have to conclude that it is the list pages command, I am using ‘main_menu’)); ?> where main_menu is the tag for the backend menu selector.
If you think you can help or want to join in the headache inducing madness, email me and I will gladly get you a login.
Regardless, thank you for getting back to me :) I have had to take a break and kill some orcs lol
Pat Fortino says
Looks like you got it working.
Chev says
Sadly no, no matter what I do, it only shows the pages on one line and unclickable.
Thanks anyway.
Pat Fortino says
you probably have to modify the jquery script to work with your menu
Winner says
Thanks for the great tutorial. I have followed the directions to a tee but can’t get the responsive menu to show up at all. I was using the Ubermenu plugin and had adjusted the UL ID accordingly in the JS and CSS but was having no luck so I disabled it to focus on getting the solution to work with the regular menu. Still no luck. The menu isn’t showing up at all. About to tear my hair out haha. Could you please take a look and see what I am doing wrong if you have a sec?? Thanks!!
Pat Fortino says
It shows up for me. Looks like you got it working?
Winner says
Yes Pat. Thanks. Just went with a plugin that did the job! I am still holding on to this though for future sites!!
Pat Fortino says
Hi Mike. What plugin did you use?
Thanks
Winner says
Responsive Select Menu by SevenSpark
Cheers
Julie says
Thanks so much for this!! I was working with a responsive theme that didn’t come with a drop down menu and with all the child pages in my client’s menu this was very important! My client was browsing on a blackberry device and she said the menu was “floating” while she was browsing on the site..any ideas why? Or how to fix this? I googled but can’t find anything specific. If it helps, she said it was the blackberry Bold..no idea what version but I’m assuming older…
Julie says
I just wanted to post an update to this. I was able to look at the site using my client’s blackberry and the menu itself was functioning fine so I knew right away that the problem had nothing to do with the script itself.
Digging a little deeper I saw the theme positioned the menu using negative margins which don’t comply with blackberry’s and adjusting that fixed the menu problem entirely.
Thanks again for your tutorial :)
Pat Fortino says
Thanks for the update Julie. Hope it helps someone else with the same issue.
GG says
Great work.
After update of NextGEN Gallery to version 2.0 the select menu is no more shown (WP 3.52). With version 1.9 of NextGEN Gallery it works perfect.
Any ideas?
julie says
well I am glad I saw your comment. I was going mad trying to figure out why all of a sudden the menu disappeared!! Apparently it has messed up a lot of people’s sites :(
http://wordpress.org/support/topic/known-plugin-and-theme-conflicts-207
Geore says
This newbie needs your help, even though a bit off topic. How to I adjust the nav bar’s location? It’s overlapping the custom header image I’m using which is only 150px high.
Thanks.
Holly says
Oh man…I can’t say thank you enough. I’m very much a beginner, and I’ve been spending hours trying to do this. I’m SO glad I found your page!
Pat Fortino says
Glad to help. Also, I think there is a plugin they might do the same thing.