title: bootstrap collapsed navbar buggy open
body: <p>Trouble with the bootstrap collapsed navbar. The navbar at the foot of the page collapses fine, but when attempting to open in the collapsed state using the collapse navbar button, the navbar will only open for a second and then immediately closes. I do have to click twice for it to reopen again (and then apparently close), so I suspect that it is indeed open, but not viewable (i.e. it is technically closing on the second click). <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {text-decoration:none; font-family: EB Garamond;-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
  
  .navbar-header {
      padding-right:20px;
  }
  
  .navbar-header &gt; a &gt; i{
      color: #777;
      padding-top: 10px;
      padding-left:10px;
      padding-right:10px;
  }
  
  
  
  .navbar-header &gt; a &gt; i:hover{
      color: white;
      text-decoration:none; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
  }
  
  
  
  .navbar-footer &gt; li {
      padding-left:5px;
      padding-right:5px;
  }
  
  
  body {
    background: url(./img/home-background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 50px;
  }
  
  
  
  .jumbotron {
    background-color: rgba(255,255,255, 0.5);
    color: inherit;
  }
  
  #banner-txt {
    position-left: -50px;
  }
  
  #banner-txt &gt; h1 {
      font-size: 500%;
      font-family: EB Garamond;
      color: #96281B;
  }
  
  @media (max-width: 1100px) {
      .navbar-header {
          float: none;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }
      .navbar-collapse.collapse {
          display: none!important;
      }
      .navbar-nav {
          float: none!important;
          margin: 7.5px -15px;
      }
      .navbar-nav&gt;li {
          float: none;
      }
      .navbar-nav&gt;li&gt;a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
  }
  
  #brand{
      margin-top: -10px;
      width: 40px;
      height: 40px;
      background: url(./img/brand-999.png);
      background-size: 40px auto;
  }
  #brand:hover{
      background: url(./img/brand-fff.png);
      background-size: 40px auto;
      -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" &gt;&lt;/script&gt;
  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" &gt;&lt;/script&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
       &lt;head&gt;
          &lt;title&gt;Homepage&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link href= "css/bootstrap.min.css" rel="stylesheet"&gt;
          &lt;link href = "index.css" rel = "stylesheet"&gt;
          &lt;link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="navbar-header pull-left"&gt;
                  &lt;a class="navbar-brand" href="./index.html"&gt;
                      &lt;div id="brand"&gt;
  
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="navbar-header pull-right"&gt;
                  &lt;a href=""&gt;&lt;i class="fa fa-twitter fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href=""&gt;&lt;i class="fa fa-facebook fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;a href=""&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;div class="container"&gt; 
              &lt;div class="pull-left" id="banner-txt"&gt;
                  &lt;h1&gt;SPORTS TEAM HOMEPAGE&lt;/h1&gt;
                  &lt;p&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class = "container-fluid"&gt;
              &lt;nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"&gt;
                  &lt;div class= "navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navFooterCollapse"&gt;
                          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;/div&gt;
                  &lt;div class="collapse navbar-collapse navFooterCollapse"&gt;                       
                      &lt;ul class="nav navbar-nav navbar-footer"&gt;
                          &lt;li&gt;&lt;a href=""&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;BLOG&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;ROSTER&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;STRENGTH AND CONDITIONING&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;RESULTS&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;PROGRAM&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;MERCH&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;COMMUNITY&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>