Select drop down menu for nav on collapse - menu

Question

I’m not a fan of the collapsed 3 line nav button when bootstrap collapses for smaller viewports. Is there a way to get the navbar collapse to a select drop down menu, as well as place it somewhere else on the page, other than in the top right? Just like this: http://filamentgroup.com/examples/rwd-nav-patterns/

Answer 1

Looking at what happens on the filamentgroup site, you can see that below a certain width, the body gets the class nav-menu and removes if when sized larger. This is their rwd-nav.js complete with comments:
jQuery(function($){
$('.nav-primary')
// test the menu to see if all items fit horizontally
.bind('testfit', function(){
var nav = $(this),
items = nav.find('a');
$('body').removeClass('nav-menu');
// when the nav wraps under the logo, or when options are stacked, display the nav as a menu
if ( (nav.offset().top > nav.prev().offset().top) || ($(items[items.length-1]).offset().top > $(items[0]).offset().top) ) {
// add a class for scoping menu styles
$('body').addClass('nav-menu');
};
})
// toggle the menu items' visiblity
.find('h3')
.bind('click focus', function(){
$(this).parent().toggleClass('expanded')
});
// ...and update the nav on window events
$(window).bind('load resize orientationchange', function(){
$('.nav-primary').trigger('testfit');
});
});
Then in their rwd-nav.css, this repositions based on width
/* Media queries
------------------------------ */
#media screen and (min-width: 640px) {
.nav-primary,
.nav-primary ul {
float: left;
}
.nav-primary ul {
float: left;
}
.nav-primary li {
float: left;
font-size: 1.5em;
border-bottom: 0;
}
}
#media screen and (min-width: 910px) {
.nav-primary {
float: right;
clear: none;
}
}
Hope that helps!