title: Z-Index Issue in Twitter Bootstrap Header
body: <p>I have the following code which creates a Twitter Bootstrap header.  The header works just fine functionally but when I use a smaller browser and the header minimizes into a dropdown menu the background of the header does not show up in front of things on the web page.  So for example the text of the header will be in front but things like images and text inputs show up in front of the dropdown background.  I have not changed any of the twitter bootstrap css and here is my HTML:</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 class="brand" href="/"&gt;Exployre&lt;/a&gt;
                    &lt;div class="nav-collapse"&gt;
                      &lt;ul class="nav"&gt;
  
                        &lt;li&gt;&lt;a href="/map"&gt;Find&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/shareadventure"&gt;Share&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/connect"&gt;Connect&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/posts"&gt;Discuss&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/about"&gt;About&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;
                    &lt;li&gt;        
                  &lt;form action="/search" class="navbar-search"&gt;
                    &lt;div&gt;
                      &lt;input type="text" placeholder="Search" class="search-query pull-right" name="q" size="55" /&gt;
                    &lt;/div&gt;
                  &lt;/form&gt;
                    &lt;/li&gt;
  
                      &lt;/ul&gt;
                    &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>