Making responsive navigation with selects work on Drupal 7 with Omega theme, plus tinynav.js

Oh holy crap. So I just spent several hours trying to find the teeny error that would make my dropdowns work. Finally found it, and am celebrating with this post.

So, let’s say you’re building a site in Drupal 7, and you’re using the Omega theme as you want a fairly easy and intuitive way to make your website responsive. Wide horizontal menus are a pain in the patootie on tiny screens, so you’re thinking “Hey! I can make my menu a sweet form select instead for the mobile view!” There’s no Drupal module to do this (yet, at least. I’m half tempted to figure out how to = build one myself at this point), so you go check out tinynav.js, which is a tiny sweet js that’ll get your nav all nice and selected in no time. Basically, it’ll look at whatever html list you tell it to, and make a version that’s a “<select>” tag with each “<option>” as a menu item. Then, you hide this on wider screens, and hide the list nav on your smallest screen width.

Installing it’s not too bad – just save tinynav.js to wherever you’re keeping your theme’s js files. Then, add code to whatever script file you’re using for all of your custom javascript. Your code’ll look a lot like mine, I bet!

scripts!

You’ll want to make sure your tinynav.js is loaded into your library file. To do this, you’ll need to first open your theme’s info file and add in the details for tinynav there. Might look something like this:

info file

So after this, you need to enable the file. Using your admin toolbar, go to Settings -> Themes ->Whateverthehellyourthemeiscalled and click the “Toggle Libraries” tab. You should see whatever you decided to call your file sitting there with a checkbox beside it. If you don’t see it, go clear your cache, stat! Anyhow, enable it once you see it.

You’d think this would be enough. But no, there’s more! I eventually figured a few things out, through trial and error.

First off, Drupal 7 has jQuery¬†1.4.4, which is apparently a bit too old to get tinynav.js to work. So, I grabbed a copy of jQuery 1.7 min, and added that in in much the same way I added tinynav.js (save to your js file, then add to the js library via the .info file for your theme – setting the weight higher so 1.7 comes first. Then, enabling it in your theme’s settings). As an aside, this totally might not be kosher at all, using two different versions of jQuery and all. But, it works? So I’m gonna go with it until a better idea comes along.

At some point I thought I needed modernizr.js as well, due to it being in the tinynav.js demo. But alas, I was misled, and ended up uninstalling it.

In conclusion, javascript is a big ole pain. However, I have working mobile nav now, so I don’t care. Woo?

 

 

 

 

4 Comments

dotcomlabs

Dude! I can’t even begin to thank you enough! I had everything else right, however I too spent a good amount of time turning my wheels.

I didn’t realize the problem with my jQuery version. After reading your post, I installed the “jQuery Update” module http://drupal.org/project/jquery_update to get to 1.7 and the menu on responsive is perfect! Thank you!

xaa

hi Virginia,

Thank you for the article. I’ve my main menu responsive now.

Do you have found a better solution finally ?

regards,
Xavier

Leave a Reply