Question

I have designed a whole website using Twitter Bootstrap and it works very well for the most part. I have done quite a bit of CSS in the past but had never done a framework like this.

The main problem I have is that when the browser goes under 600px the and the header condenses into a dropdown (which I want) the dropdown goes behind images and some HTML elements such as text input boxes and other dropdown menus.

Is there any way to make this header dropdown menu opaque so that it is in front of every other element? I would provide some code but I am not sure specifically what part of the Twitter Bootstrap stylesheet would be helpful.

<div class="navbar navbar-fixed-top">

              <div class="navbar-inner">

                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                  </a>

                  <a class="brand" href="/">Exployre</a>

                  <div class="nav-collapse">

                    <ul class="nav">

                      <li><a href="/map">Find</a></li>

                      <li><a href="/shareadventure">Share</a></li>

                      <li><a href="/home">Inspire</a></li>

                      <li><a href="/posts">Discuss</a></li>

                      <li><a href="/groups">Groups</a></li>

                      <li><a href="/profile">Profile</a></li>

                      <li><a href="/about">About</a></li>

                  <li>        

                        <form action="/search" class="navbar-search">

                          <div>

                            <input type="text" placeholder="Search" class="search-query pull-right" name="q" size="55" />

                          </div>

                        </form>

                        <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

                      </li>



                    </ul>

                  </div><!--/.nav-collapse -->

              </div>

            </div>

I believe all of these classes are straight from the Twitter Bootstrap CSS without modification.

Answer 1

You probably have a z-index on your website content that is a higher value than the z-index defined for the Dropdowns.

If you’re using the LESS version of Twitter Bootstrap, open variables.less and find the line containing @zindexDropdown (on line 144). The default setting is 1000, you can change it to a number that is higher than the z-index on your content.

If you’re using the normal CSS, it is defined in the rule for .dropdown-menu (on line 2773).