How can I prevent twitter bootstrap from collapsing the top nav dropdown menus at browser widths less than 960px wide?

Question

I have tried playing with the various class min/max heights and widths in CSS and can't seem to prevent the top nav bar from collapsing my dropdown menus. I would prefer a fixed width, but full screen menu fixed to the top. The dropdowns work fine, but when I reduce the width of the browser window it collapses. I've removed the toggle but no love from bootstrap. Here is the code from bootstrap 2.0:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="brand" href="./index.html">Brand Name&nbsp;</a>
        <ul class="nav">
           <form class="navbar-search">
             <input type="text" class="search-query" placeholder="Search Active Page...">
           </form>
        </ul>

       <ul class="nav pull-right">
               <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-user icon-white"></i>&nbsp;Pages<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">My Pages</a></li>
                    <li><a href="#">New Page</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Share Your Pages</a></li>
                    <li><a href="#">Page Browswer</a></li>
                  </ul>
              </li> 

               <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-cog icon-white"></i>&nbsp;Settings<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Upload Images</a></li>
                    <li><a href="#">Upload Files</a></li>
                    <li><a href="#">Link Other Accounts</a></li>
                     <li><a href="#">Manage Labels</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Privacy Settings</a></li>
                    <li><a href="#">Help</a></li>
                 </ul>
              </li> 
           <li>&nbsp;&nbsp;<img src="img/small_fb_pic.jpg" vspace="5px"></li>
           <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               John<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Logout</a></li>
                <li class="divider"></li>
                <li><a href="#">Help</a></li>
              </ul>
          </li>      


        </ul>  <!-- end left justified menu items -->


    </div>
  </div>
</div>

Answer 1

The width definitions for the fluid layout are contained in css/bootstrap-responsive.css you can change the ranges at which bootstrap will collapse the menu by simply changing the min-width and max-width values in the @media definitions.

For example to make the navbar collapse in a window less than 800px replace navbar related @media declarations containing max-width: 980px with max-width: 800px. Do the same for min-width. At the time of writing, these changes happened to be on lines 105, 281, and 381 such that each line changed to look like the following (they are probably different now):

105: @media (min-width: 768px) and (max-width: 800px) { ... }

281: @media (max-width: 800px) { ... }

381: @media (min-width: 800px) { ... }

Answer 2

For 3 very useful solutions see this link: http://taylor.fausak.me/2012/03/15/dropdown-menu-in-twitter-bootstraps-collapsed-navbar/

I ended up using option 1 on his list... the basic gist is to edit your Responsive.less or Responsive.css if you don't have access to the .less source, as such:

Add: :not([data-no-collapse="true"])

Everywhere the following class stylings are defined. .navbar .dropdown-menu

(I found 7 places in the responsive.less file)

Then, where you define your html, you'll want to add an attribute as:

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="icon-user"></i>
        {{ account.FirstName}} {{ account.LastName }}&nbsp;
        <b class="caret"></b>
    </a>

    <ul class="dropdown-menu" data-no-collapse="true">
        <li><a href="/logout.cshtml">Logout</a></li>
    </ul>
</div>

Notice the data-no-collapse attribute on the unordered list.

EDIT: Now your dropdown will not expand...

Answer 3

This is for responsive design on websites that can adjust to screen size (particularly on mobile devices). Learn more here:

http://twitter.github.com/bootstrap/scaffolding.html#responsive

To fix this on your bootstrap solution, go to the bootstrap customize page, uncheck Responsive Layouts and re-download your bootstrap files.

http://twitter.github.com/bootstrap/download.html

It's better than editing the bootstrap files manually, imo. Hope this helps.