Adding mobile menus to responisve WordPress themes without plugins **UPDATED 4/10/13

The best tool I have found for creating themes in WordPress is the Bones template by Eddie Mochado at Themble.

The latest version of Bones was completely updated using the latest web standards. It has always been an HTML5/CSS3 template. Originally based on the 960 grid, the new version is completely responsive with a twelve column grid based on Twitter bootstrap.

In addition to the new responsive layout, the template comes with both SASS and LESS stylesheets allowing the end user to choose their preferred platform.

I was comfortable with the original template and created many sites with it. Now it was time to jump into the “Responsive” deep end. It has taken some time trying to wrap my head around the whole “mobile first” idea. Previously I let the WP-Touch plugin handle the mobile stuff. Now it was time to build my own site with this latest methodology.

The community that works with Eddie on Github has been great. I have had nothing but extremely helpful interactions in trying to figure out what was going on.

What I was trying to accomplish was to have the main navigation replaced with a drop down menu. Based on this great post by Jerry G. Reitfield, here is my solution.

Step 1

Add the tinynav.min.js to the /library/lib/js/ folder

Using the tinynav.js found here -> https://github.com/viljamis/TinyNav.js (This tutorial was written with version 1.1)

Step 2

In the bones.php file, directly below the line that enqueues jQuery and before the line that enqueues the scripts.js file add these lines:

wp_register_script( 'bones-tinynav', get_stylesheet_directory_uri() . '/library/js/libs/tinynav.min.js', array(), '1.1', false );
wp_enqueue_script('bones-tinynav');

Step 3

In the scripts.js file add this below the section that states //add your scripts here

$(function () {
      $('#menu-main-menu').tinyNav({
        header: 'Menu' // Writing any title with this option triggers the header
      });
    });

The #main-menu is the title that you give your menu in WordPress menus. If you name it Top Menu, then change this to #top-menu

The word ‘Menu’ can be changed to read whatever you want.

Read the docs on tiny nav if you want to set other features such as having the current selected page displayed in the menu.

If you want the “active” class to display the current page instead of the word ‘Menu’ use these options -> active: ‘current_page_item’, header: false
You will need to edit tinynav.min.js and change “selected” to “current_page_item” for this feature.

Step 4

Finally I add the styling to turn it on and off.
in base.less or base.scss

.tinynav { display: block; margin: 160px auto 0 auto; width:100%; }
#menu-main-menu { display: none }

in 768up.less or 768up.scss

.tinynav { display: none;}
#menu-main-menu {display:inline-block;}

Just remember to change #menu-main-menu to #menu-“whatever you call your main menu”

To see what this looks like, just resize your browser screen and watch my main menu disappear and the mobile menu appear.