I’m currently working on building a good responsive base version of the Theme Hybrid child theme I use as the starting point for most WordPress sites. To that end, today I destroyed a project-in-progress to rebuild it responsively. It’s going well so far, but I’m not close to being done.

One thing that is complete: I now have a responsive menu thanks to a little jQuery script called TinyNav.js. This automatically converts any ul or ol-based navigation menu to a select menu. It was very easy to do except for one thing that wasn’t clear from the documentation, which I’ll explain below.

First download TinyNav.js from the link above and upload it to your theme directory. Then in the head section of your theme, connect to the script:

Then add this, changing #menu-primary to the ul id in your WordPress menu. The second part of this makes the current_page_item appear in the select menu by default.

PHP

1

2

3

4

5

6

7

8

9

<script>

$(function(){

$("#menu-primary").tinyNav();

});

$("#menu-primary").tinyNav({

active:'current_page_item',// Set the "active" class

header:false// Show header instead of the active item

});

</script>

Finally, open up tinynav.js. This was the tricky part because it wasn’t explained clearly. You’re going to need to make one change: the first occurrence of ‘selected’ needs to be changed to ‘current_page_item’ and then the first part of the script should look like this: