title: BUG: Bootstrap Fixed Collapsible Navbar
body: <p>I am having a bit of trouble with my top fixed collapsible bootstrap navbar.</p>
  
  <p>Whenever I click on a link of my navigation bar, a strange horizontal bar that looks like a horizontal scrollbar appears above the navbar and then disappears instantly.</p>
  
  <p>I tried removing all my JS , CSS, and the rest of the page leaving only the navbar, and the bug is still there, so I assume it is something about the syntax of that navbar.</p>
  
  <p>Below is the code</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"&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;a class="navbar-brand" href="index.php"&gt;My Web&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;div class="collapse navbar-collapse" id="navbar"&gt;
                          &lt;ul class="nav navbar-nav navbar-right"&gt;
                              &lt;li&gt;&lt;a href="#topBanner" data-toggle="collapse" data-target=".navbar-collapse"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#proyecto" data-toggle="collapse" data-target=".navbar-collapse"&gt;Proyecto&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#masInfoContainer" data-toggle="collapse" data-target=".navbar-collapse"&gt;Galer&amp;iacute;a&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#planosContainer" data-toggle="collapse" data-target=".navbar-collapse"&gt;Planos&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#mapContainerContainer" data-toggle="collapse" data-target=".navbar-collapse"&gt;Ubicaci&amp;oacute;n&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#contacto" data-toggle="collapse" data-target=".navbar-collapse"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li style="font-size:12px"&gt;&lt;a&gt;(0000) 4444-4444&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>Also, bootstrap scrollspy is not working for me on this navbar. I guess it might be the same issue.</p>
  
  <p>Thank you very much for your assistance</p>
  
  <p>EDIT: I found that the problem is on making the navbar collapsible. If I remove the data attributes from the li elements, this problem is gone, but on mobile when I touch on some link the navbar doesnt collapse back.</p>