Bootstrap 3 Navbar Dynamic Collapse

css, html, jquery, twitter-bootstrap, twitter-bootstrap-3

Solution

You should add a custom class on your navbar, and change the style when it gain height :

<nav id="autocollapse" class="navbar navbar-default" role="navigation">
    ...
</nav>

function autocollapse() {
    var navbar = $('#autocollapse');
    navbar.removeClass('collapsed'); // set standart view
    if(navbar.innerHeight() > 50) // check if we've got 2 lines
        navbar.addClass('collapsed'); // force collapse mode
}

$(document).on('ready', autocollapse);
$(window).on('resize', autocollapse);

#autocollapse.collapsed .navbar-header {
    float: none;
}
#autocollapse.collapsed .navbar-toggle {
    display: block;
}
#autocollapse.collapsed .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
#autocollapse.collapsed .navbar-collapse.collapse {
    display: none!important;
}
#autocollapse.collapsed .navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
#autocollapse.collapsed .navbar-nav>li {
    float: none;
}
#autocollapse.collapsed .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Bootply Forked Plunker

Problem

I am searching for a solution to a resizing issue with bootstrap's navbar. Currently a navbar can have a sort of 'overlapping' effect before becoming compacted. (I am aware that this is due to media queries) Media queries are being used here to dictate when to go compact, however I am looking for a solution that will cause the navbar to resize ONLY when there is no room left between '.navbar-nav' and '.navbar-right'. This is significant because '.navbar-nav' and '.navbar-right' have dynamic widths. (in other words sometimes '.navbar-nav' will contain anywhere from 1 list item to 5 list items. '.navbar-right' is similar in that it is a string of text that could be anywhere from 3 characters to potentially 100 characters long or even longer. Below is a plunker example where by resizing the preview pane, you can see the unintended 'overlapping' taking place (as it waits for the max-width media query to be met). http://plnkr.co/edit/7r5fNX2JyJUuT0PvVPDf?p=preview How can I have it become compacted only when '.navbar-nav' and '.navbar-right' have no room between each other (say.. 5px of space between each other or something similar)? (please note, adjusting the break points is not enough to accomplish this)

Original source