title: subnav bar collapsed with twitter bootstrap
body: <p>I'm using twitter bootstrap and my nav bar works fine with collapse function.</p>
  
  <p><strong>This is my html code:</strong></p>
  
  <pre><code>&lt;div class="subnav"&gt;
      &lt;ul class="nav nav-pills"&gt;
        &lt;li class="dropdown"&gt;
          &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;Buttons &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li class=""&gt;&lt;a href="#buttonGroups"&gt;Button groups&lt;/a&gt;&lt;/li&gt;
            &lt;li class=""&gt;&lt;a href="#buttonDropdowns"&gt;Button dropdowns&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="dropdown"&gt;
          &lt;a href="#" data-toggle="dropdown" class="dropdown-toggle"&gt;Navigation &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;li class=""&gt;&lt;a href="#navs"&gt;Nav, tabs, pills&lt;/a&gt;&lt;/li&gt;
            &lt;li class=""&gt;&lt;a href="#navbar"&gt;Navbar&lt;/a&gt;&lt;/li&gt;
            &lt;li class=""&gt;&lt;a href="#breadcrumbs"&gt;Breadcrumbs&lt;/a&gt;&lt;/li&gt;
            &lt;li class=""&gt;&lt;a href="#pagination"&gt;Pagination&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="#labels"&gt;Labels&lt;/a&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="#badges"&gt;Badges&lt;/a&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="#typography"&gt;Typography&lt;/a&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="#thumbnails"&gt;Thumbnails&lt;/a&gt;&lt;/li&gt;
        &lt;li class=""&gt;&lt;a href="#alerts"&gt;Alerts&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#progress"&gt;Progress bars&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#misc"&gt;Miscellaneous&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This is my <strong>bootstrap_and_overrides.css.scss</strong></p>
  
  <pre><code>$iconSpritePath: asset-url('glyphicons-halflings.png', image);
  $iconWhiteSpritePath: asset-url('glyphicons-halflings-white.png', image);
  @import "bootstrap";
  body { padding-top: 40px;
         .navbar .brand {padding: 10px 20px; }
         background: url("background.png") repeat scroll 0 0 #EEEEEE;
  
  
  .subnav {
      background-color: #EEEEEE;
      background-repeat: repeat-x;
      border: 1px solid #E5E5E5;
      border-radius: 4px 4px 4px 4px;
      height: 36px;
  
  
  
              .nav &gt; li &gt; a {
                          border-left: 1px solid #F5F5F5;
                          border-radius: 0 0 0 0;
                          border-right: 1px solid #E5E5E5;
                          margin: 0;
                          padding-bottom: 11px;
                          padding-top: 11px;
                          }
      }
  
      .subnav-fixed {
      /*important part*/
      left: 0;
      position: fixed;
      right: 0;
      top: 40px;
      z-index: 1020;
      /*design stuff*/
      border-color: #D5D5D5;
      border-radius: 0 0 0 0;
      border-width: 0 0 1px;
      box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 5px rgba(0, 0, 0, 0.1);
      background-color: #FFFFFF;
      }
  }
  @import "bootstrap-responsive";
  </code></pre>
  
  <p><strong>and this is my js code:</strong></p>
  
  <pre><code>$(document).scroll(function(){
      // If has not activated (has no attribute "data-top"
      if (!$('.subnav').attr('data-top')) {
          // If already fixed, then do nothing
          if ($('.subnav').hasClass('subnav-fixed')) return;
          // Remember top position
          var offset = $('.subnav').offset()
          $('.subnav').attr('data-top', offset.top);
      }
  
      if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() &lt;= $(this).scrollTop())
          $('.subnav').addClass('subnav-fixed');
      else
          $('.subnav').removeClass('subnav-fixed');
  });
  </code></pre>
  
  <p>Also, I'm using subnav bar, my problem is that my subnav bar is not collapsed.</p>
  
  <p><strong>The correct subnav bar version in twitter bootstrap:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/3zu1f.png" alt="fine subnav twitter bootstrap"></p>
  
  <p><strong>My bad version that it does not works fine :/</strong></p>
  
  <p><img src="https://i.stack.imgur.com/4tl7f.png" alt="bad subnav twitter bootstrap"></p>
  
  <p><strong>How can I fix this problem?</strong></p>
  
  <p>Thank you!</p>