Not There Yet: Hacking Twitter Bootstrap Responsive Navigation Bar

bootstrap

For the last few weeks, I’ve been building a new responsive theme in WordPress using the Twitter Bootstrap framework. Halfway through the project, I realized that the responsive drop-down navigation bar built into Bootstrap kind of sucks. At first glance, it works smoothly, resizing and realigning itself without a hitch; moving through breakpoints without a jitter or a stutter; popping up a cute, tasty little navburgerbad responsive design bug just when my menus are getting too tight.

And then I try to actually visit one of the main sections of the site, I end up just opening and closing a drop-down in “desktop mode”, or playing the accordion in “mobile mode”.

I recorded it for posterity on Twitter:

Those top level sections of the site are pretty important (even if Team Bootsrap thinks otherwise), so finding a solution was pretty important.

I scoured Google for every possible iteration of responsive drop-down navigation that doesn’t suck, and while I did find some that were pretty cool, they still sucked in some important, obnoxiously obvious way.

And I really want my tasty navburger.

Digging into Bootstrap, it does some pretty clever manipulation of link attributes via CSS and JavaScript, particularly with its use of the custom attribute “data-toggle”, which has mysterious and magical properties in Bootstrap, not unlike the fabled unicorn.

From many may years of experience developing dynamic UX components in JavaScript (well, hacking away at and cobbling together the work of people who actually know what they’re doing), I know the best way to deal with a unicorn is to kill it. And then eat it.

It makes for a tasty navburger.

To kill that “data-toggle” unicorn, I decided to use some jQuery to rearrange classes and snip out the “unnecessary” attribute.

Here’s what I came up with:

 

// JavaScript Document
//toggleLink.js
// Toggle the Bootstrap Navigation link class so it actually links
;(function ($) {
    $(function() {
        var links = $('a.dropdown-toggle').click(function() {
            links.removeClass('active');
            $(this).addClass('active');
            $(this).mouseup(function() {
                $('.dropdown-toggle').attr("data-toggle", "dropdown");
                $(this).attr("data-toggle", "");
            });
        });
    });
})(jQuery);

This worked pretty well when actually using a device equipped with a real mouse, but my iPad Mini had no idea what a “click” is, and simply ignored my efforts to get to those top level pages in the navigation bar and navburger.

I had one of those “DUH” moments when I remembered that mobile devices are always a bit touchy (did you catch what I did with that pun?).

Again, it was time to show Bootstrap who was in charge here, so I Google’d (yes, Google is who is in charge here) “touch click jQuery“, and after browsing a but, decided against jQuery Mobile (of which I’m actually a fan, but didn’t want the unnecessary bloat) in favor of jQuery.Tap,  a lovely jQuery extension that seemed perfect for my little project.

I added jquery.tap.js to my /js folder and referenced it in the footer (because that’s the way I roll these days), and added the following code to my toggleLink.js

;(function ($) {
    $(function() {
        var links = $('a.dropdown-toggle').on('click tap', function() {
            links.removeClass('active');
            $(this).addClass('active');
            $(this).on('click tap', function() {
                $('.dropdown-toggle').attr("data-toggle", "dropdown");
                $(this).attr("data-toggle", "");
            });
        });
    });
})(jQuery);

This solution still isn’t perfect, but it at least makes the Bootstrap responsive drop-down navigation functional. The biggest issue is that the current code takes three clicks to make the the top navigation items link to their respective pages.

I’ll continue hammering away at this over the next week or so, so make sure to check back. And if you have THE solution, please share!

Leave a Reply