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.

17 Comments

  1. Ewout Reply

    Thanks!

    Some notes:
    * Your solution doesn’t work by default, because jQuery is loaded after the script (in your website, you load jquery separately).
    * Easier to integrate both tinynav and the script in script.js (this way you also bypass the jquery issue
    * Note the tinynav version! It’s changed since you wrote this, so better link to (or quote) the version you use!

    • Thanks for the comments. I have made some updates today that I have been meaning to do.

      First, I have moved all my scripts out of the header and into my own guhru.js file.

      I have also created my own guhru.php file where I register and enqueue the scripts that I want to use. (We are supposed to be registering and enqueueing scripts right?)

      I could have just included this in the functions, but I wanted something I can easily move site to site.

      Then in the functions.php file, I use the line

      require_once('library/guhru.php');

      The only thing I have had issue with is where to load the jQuery library. I have tried moving and enqueueing it everywhere, but the only thing that currently works for me is to call it in the header.

  2. This is exactly what I’m looking to achieve but having trouble working out how to put all the pieces together. Would you be able to expand on your solution? I’ve add the enqueue to bones.php but seem to be missing a few steps. Your help would be appreciated.

    • Try following the steps in the original post. The enqueueing scripts method is somewhat finicky.

      • Hi, what is the original method? I’m following the steps and somehow it didn’t work on my iphone. (It works fine on a computer browser when I resize it though.) Thank you for your help!

        • The original method had the scripts in the header and was using an older version of tinynav.js

          Send me the link to your site and I will see if I can help.

  3. thanks for the simple walkthrough! i went with wp_enqueue.., works great.

  4. Splendid Angst Reply

    I’m decently lost. You said you edited and added things but I’m finding 5 “selected” spots in the js file, also where EXACTLY do I add the $(function ()?

    • In the scripts.js file line 69 -> // add all your scripts here

      drop it below there.

      • Splendid Angst Reply

        Awesome thanks!

  5. Hi,

    Thanks for the tutorial, I must have done something wrong as I can not get the menu to appear, the normal menu disappears when viewed on a tablet/mobile, but nothing replaces it. I’m pretty sure I’ve not done anything wrong – could you please help?

    Also I’m working from localhost

  6. Ah! Nevermind it was my fault, I had created the wrong .js file 🙂

  7. Cathrine Fallesen Reply

    Might just be me, but I for the life of me can’t make the current_page_item show in my mobile menu, I have tried a lot of different possibilities. But this part is a bit dodgy in your (otherwise) very nice tutorial.. Do you want me to change the script file, that’s the only one responding to my changes, however, it just writes current_page_item as menutitle, not the actual item. It’s driving me crazy 🙂

    (site is a test site basrec.cowitraining.dk)

    • I looked at your script and you have -> header: ‘current_page_item’

      If you want the active page to be shown you have to have -> active: ‘current_page_item’

      And yes you have to change the tinynav.min.js file. Open it up and search for ‘selected’ and change it to ‘current_page_item’

      Hope that helps,
      anthony

      • Cathrine Fallesen Reply

        Thank you for a very quick response!

        I have changed all selected to be current_page_item (both in tinynav.min.js and in tinynav.js), I’ve tried using just active now, but it still seems to either display false (when I have written false in header in all above docs aswell as in script.js, as you write in step 3),
        or the title of the menu just disappears (when I leave header empty in all 3 files), and just shows the first item in my menu (not the current one)..

        It’s probably just me who have misunderstood something, since it seems like it’s just something tiny that would make it right 🙂

  8. I’m using Bones and had trouble getting my mobile menu to work. Anthony, your solution worked perfectly, thanks!

  9. Thanks! This worked very well.

Leave a Reply