Get Bootstrap navbar collapse to trigger javascript instead?

Question

I've got a standard Twitter Bootstrap 3 navbar with some buttons on it (as per here: http://getbootstrap.com/components/#navbar-default ). I want to change the collapse behaviour (where it becomes a dropdown menu below a certain screen width) so that my custom Javascript function is run, instead of the drop down menu being created. This is because I'm making more extensive changes to the interface for smaller screens, than just CSS would allow (eg I'm moving UI elements around in the DOM etc).

Should I just switch off the collapse behaviour of the navbar, and if so how?

And then I'm thinking on both page load and page resize (using JQuery's resize() event) I check new window width and trigger the mobile UI (via my function) if width is below the collapse point?

Or is there a better way of doing this?

Any thoughts appreciated! Thanks

Answer 1

This is doable, and I applaud your effort to go beyond BS styling in extending the platform to something unique.

Using less open the BS Navbar.less file. Look for the section within the .navbar-collapse { class definition.

This is the default styling (remember mobile first is set) and will break to the horizontal styling at the default (if not overridden) of 768px. You can place your styling in here and it will default. You can place the horizontal styles within this section, and remove any @media (min-width: @grid-float-breakpoint) { sections that would flip to the horizontal (as it would be set by default.

Next step is to handle a breakpoint. I like enquire.js as it allows for identical registration of breakpoints between CSS and the JS listener.

http://wicky.nillia.ms/enquire.js/

enquire.register("screen and (max-width: 767px)", {
match : function() {
       //Do something
},  
unmatch : function() {
       //undo something
}

});

Without enquire.js:

$(window).resize(function() {
  if($(window).width() < 768){
     //do it
    } 
});