Twitter Bootstrap - dropdowns inside navbar but outside nav-collapse

Question

I want to add a dropdown to the navbar, but ensure that when the browser is resized to a narrower width, the dropdown remains visible in the navbar and is not included in the nav-collapse. The html below works. However, when the page resizes, the dropdown drops onto the next row, and displays expanded in the navbar, leaving me with a very deep navbar. I'm calling bootstrap-collapse.js and bootstrap-dropdown.js. Anyone got any ideas? ```

Accepted Answer

According to Mark Otto, one of the bootstrap's developers:

All dropdowns within the .nav in the navbar will be affected. Currently we don't offer a way to prevent this behavior.

However, it is possible to have an uncollapsed dropdown in a collapsed navbar. You can accomplish this in one of three ways:

- Add a data attribute to the dropdown (`data-no-collapse="true"`) to fix the responsive selectors.

- Replace the dropdown’s class (`class="dropdown-menu-no-collapse"`) to rebuild its styles from the ground up.

- Add another class to the dropdown (`class="dropdown-menu no-collapse`) to override the responsive styles.

I wrote a blog post that explains what to do. The first method requires editing `bootstrap-responsive.css`, and the second requires changing `bootstrap.css`. You don't have to change any of the bootstrap's CSS for the third method, but it's pretty hard to maintain.

Twitter Bootstrap - dropdowns inside navbar but outside nav-collapse

Solution

Problem