title: Twitter bootstrap navbar and dropdown - not resizing
body: <p>Im currently using a dropdown inside of the menu in my navbar. The drop down works fine when the navbar is in high resolution layout. </p>
  
  <p>When operating in the mobile layout the navbar will not resize when the dropdown is selected, that is unless I open the navbar, then close it, then open it again. While doing this, I noticed that the navbar will not slide down on the first opening - which leads me to believe this is related to a JavaScript event.</p>
  
  <p>Edit - Added nav collapse markup for before and after, and pre render. Problem can be reproduced in Bootply using pre-render markup for the nav-collapse div.</p>
  
  <p>Pre-rendered markup:</p>
  
  <pre><code>&lt;div class="nav-collapse"&gt;
      @PageTemplateFeature("Main Navigation")
      &lt;div class="pull-right"&gt;
          @PageTemplateFeature("Service Menu")
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Before re-opening:</p>
  
  <pre><code>&lt;div class="nav-collapse in collapse" style="height: 176px;"&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/NdjdO.jpg" alt="Before re-opening"></p>
  
  <p>After re-opening:</p>
  
  <pre><code>&lt;div class="nav-collapse in collapse" style="height: auto;"&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/3A8IQ.jpg" alt="After re-opening"></p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="navbar navbar-fixed-top"&gt;
          &lt;div class="navbar-inner"&gt;
              &lt;div class="container"&gt;
                  &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;a href="/" class="brand"&gt;&lt;span style="color: black;"&gt;&lt;/span&gt;.COM&lt;/a&gt;
                  &lt;div class="nav-collapse"&gt;
                      &lt;ul class="nav"&gt;
                          &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" tabindex="-1" id="drop_1"&gt;Magazine&lt;/a&gt;
                              &lt;ul aria-labelledby="drop_1" role="menu" class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="/Magazine/Current-Issue" tabindex="-1"&gt;Current Issue&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="/Magazine/Digital-Edition" tabindex="-1"&gt;Digital Edition&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="/Blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;div class="pull-right"&gt;
                          &lt;ul class="nav"&gt;
                              &lt;li&gt;&lt;a href="/Sitemap"&gt; Sitemap &lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>