<p dir="auto">I have a dropdown inside a nav-collapse, and this is happening:</p>
<ul dir="auto">
<li>Load the page in width &lt; 900px</li>
<li>Click on btn-navbar to un-collapse</li>
<li>Click on dropdown to show the dropdown-menu. Nothing happens.</li>
<li>Click twice on btn-navbar to collapse and un-collapse again.</li>
<li>Click on dropdown to show the dropdown-menu. Now it works.</li>
</ul>
<p dir="auto">Inspecting it with firebug I found that the height is fixed the first time, the second time is auto:</p>
<p dir="auto"><a href="https://s3.amazonaws.com/i.imm.io/N59y.jpeg" rel="nofollow">https://s3.amazonaws.com/i.imm.io/N59y.jpeg</a><br>
<a href="https://s3.amazonaws.com/i.imm.io/N5c7.jpeg" rel="nofollow">https://s3.amazonaws.com/i.imm.io/N5c7.jpeg</a><br>
<a href="https://s3.amazonaws.com/i.imm.io/N5bG.jpeg" rel="nofollow">https://s3.amazonaws.com/i.imm.io/N5bG.jpeg</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;css/bootstrap.css&quot; /&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;css/bootstrap-responsive.css&quot; /&gt;
        &lt;script src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;js/bootstrap.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class=&quot;navbar&quot;&gt;
            &lt;div class=&quot;navbar-inner&quot;&gt;
                &lt;div class=&quot;container&quot;&gt;

                    &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
                    &lt;button class=&quot;btn btn-navbar&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.nav-collapse&quot;&gt;
                        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                        &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
                    &lt;/button&gt;

                    &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
                    &lt;a class=&quot;brand&quot; href=&quot;#&quot;&gt;Project name&lt;/a&gt;

                    &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
                    &lt;div class=&quot;nav-collapse&quot;&gt;
                        &lt;ul class=&quot;nav pull-right&quot;&gt;
                            &lt;li class=&quot;dropdown&quot;&gt;
                                &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
                                Anonymous &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
                                &lt;/a&gt;
                                &lt;ul class=&quot;dropdown-menu&quot;&gt;
                                    &lt;li&gt;
                                        &lt;a href=''&gt;&lt;i class='icon-chevron-right'&gt;&lt;/i&gt; Login&lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=''&gt;&lt;i class='icon-plus'&gt;&lt;/i&gt; Register&lt;/a&gt;
                                    &lt;/li&gt;
                                &lt;/ul&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
        &lt;link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css" /&gt;
        &lt;link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-responsive.css" /&gt;
        &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
        &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="navbar"&gt;
            &lt;div class="navbar-inner"&gt;
                &lt;div class="container"&gt;

                    &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
                    &lt;button 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;/button&gt;

                    &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
                    &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;

                    &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
                    &lt;div class="nav-collapse"&gt;
                        &lt;ul class="nav pull-right"&gt;
                            &lt;li class="dropdown"&gt;
                                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                                Anonymous &lt;b class="caret"&gt;&lt;/b&gt;
                                &lt;/a&gt;
                                &lt;ul class="dropdown-menu"&gt;
                                    &lt;li&gt;
                                        &lt;a href=''&gt;&lt;i class='icon-chevron-right'&gt;&lt;/i&gt; Login&lt;/a&gt;
                                    &lt;/li&gt;
                                    &lt;li&gt;
                                        &lt;a href=''&gt;&lt;i class='icon-plus'&gt;&lt;/i&gt; Register&lt;/a&gt;
                                    &lt;/li&gt;
                                &lt;/ul&gt;
                            &lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
<p dir="auto">In order to customize the prev/next buttons (with, say, an icon), it is also required to recreate about half the styles associated with <code class="notranslate">.icon-next</code> and <code class="notranslate">.icon-prev</code>. This is because these styles also include</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  .icon-prev {
    &amp;:before {
      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
    }
  }
  .icon-next {
    &amp;:before {
      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
    }
  }"><pre class="notranslate">  .<span class="pl-c1">icon-prev</span> {
    <span class="pl-ent">&amp;</span><span class="pl-kos">:</span><span class="pl-c1">before</span> {
      <span class="pl-c1">content</span><span class="pl-kos">:</span> <span class="pl-s">'\2039'</span>;<span class="pl-c1">/</span><span class="pl-c1">/</span> SINGLE LEFT<span class="pl-c1">-</span>POINTING ANGLE QUOTATION MARK (U+2039)
    }
  }
  .<span class="pl-c1">icon-next</span> {
    <span class="pl-ent">&amp;</span><span class="pl-kos">:</span><span class="pl-c1">before</span> {
      <span class="pl-c1">content</span><span class="pl-kos">:</span> <span class="pl-s">'\203a'</span>;<span class="pl-c1">/</span><span class="pl-c1">/</span> SINGLE RIGHT<span class="pl-c1">-</span>POINTING ANGLE QUOTATION MARK (U+203A)
    }
  }</pre></div>
<p dir="auto">I suggest additional classes created <code class="notranslate">.icon-prev-indicator</code> and <code class="notranslate">.icon-next-indicator</code> that just has the content associated with it. these names would avoid any existing icon conflict both in glyphicons and font awesome.</p>
<p dir="auto">this is how it currently works (ripped from the sample site)<br>
<a href="http://jsfiddle.net/Y9HnH/" rel="nofollow">http://jsfiddle.net/Y9HnH/</a></p>
<p dir="auto">how i think it should work<br>
<a href="http://jsfiddle.net/fwqvK/" rel="nofollow">http://jsfiddle.net/fwqvK/</a></p>
<hr>
<p dir="auto">A similar complaint could be made about background styles applied via <code class="notranslate">.carousel-control.left</code> and <code class="notranslate">.carousel-control.right</code></p>