Z-Index Issue in Twitter Bootstrap Header

Question

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:

<div class="navbar navbar-fixed-top">
              <div class="navbar-inner">
                <div class="container">
                  <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="/connect">Connect</a></li>
                      <li><a href="/posts">Discuss</a></li>
                      <li><a href="/profile">Profile</a></li>
                      <li><a href="/about">About</a></li>
                      <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>
                  </li>

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

you better post a link to the page online, too many things might influence on issue — Serg, Nov 06 '12 at 17:30
Yep. That code works just fine. Something else on the page is causing your problem. — keyboardSmasher, Nov 06 '12 at 17:42

score 5 · Accepted Answer · edited May 23 '17 at 11:51

5

A design issue? maybe (if you haven't changed anything in the css stylesheet)

this selector has this CSS property

.navbar-fixed-top, .navbar-fixed-bottom {
  position: fixed;
  /* other properties */
}

but after the media query gets this

@media (max-width: 979px)
.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}

that position: static; is the culprit ... it should be either relative/fixed or simply remove it.

Source :

....position: static means "Ignore all the positioning instructions from left, top, z-index, etc."

edited May 23 '17 at 11:51

Community

1
1

answered Nov 06 '12 at 19:54

JFK

40,963
31
133
306

ah thank you! that had been bugging me for weeks and that fixed it right up. do you know why that would have been in there? – clifgray Nov 06 '12 at 21:11

Z-Index Issue in Twitter Bootstrap Header

1 Answers1