CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
clifgray
clifgray

Reputation: 4429

Twitter Bootstrap Collapsing Menu not in front of other elements

I'm using twitter bootstrap 2.3 and when I make my browser smaller it collapses correctly but when I click on the button to do the dropdown it doesn't appear in front of the other items. Here is a working demo: http://www.thehighlightnetwork.com/ I've been trying to fix it in the developer tools in Chrome but to no avail.

Here is the relevant code:

  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <button type="button" 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>
        </button>
        <a class="brand" href="/"><img src="http://i.imgur.com/8dN9Ck1.png" alt="small logo" style="height:50px;"></a>
        <div class="nav-collapse collapse" style="height:0px;">
          <ul class="nav">
            <li><a href="/">The Highlight Network</a></li>
        <li><a href="http://thehighlightnetwork.com/blog/">Official Blog</a></li>
        <li><a href="/profile" class="">Profile</a></li>
        <li><a href="/logout" class="">Logout</a></li>
        <li><a href="/login" class="">Sign Up!</a></li>
            <li><a href="/videohandler">Upload</a></li>
          </ul>
          <ul class="nav pull-right">
            <li>
              <div class="center-it">
                <form class="form-search" action="/search" method="GET" style="margin:0; margin-top:15px;">
                  <input type="text" name="search_tag" placeholder="search..." class="input-medium search-query pull-right">
                </form>
              </div>            
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

In the official demo site it pushes down all the other elements which I would be happy with or if I can simply make it so that it is in front of the other elements.

Upvotes: 1

Views: 1919

Answers (1)

erikrunia
erikrunia

Reputation: 2383

The static position of your fixed navbar is causing this, the following css will override that and fix your problem (confirmed in chrome)

.navbar-fixed-top, .navbar-fixed-bottom {
    position: relative !important;
}

enter image description here

Upvotes: 3

Related Questions