BUG: Bootstrap Fixed Collapsible Navbar - html

Question

I am having a bit of trouble with my top fixed collapsible bootstrap navbar.
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.
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.
Below is the code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Web</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Proyecto</li>
<li>Galería</li>
<li>Planos</li>
<li>Ubicación</li>
<li>Contacto</li>
</ul>
<ul class="nav navbar-nav">
<li style="font-size:12px"><a>[phone]</a></li>
</ul>
</div>
</div>
</div>
</nav>
Also, bootstrap scrollspy is not working for me on this navbar. I guess it might be the same issue.
Thank you very much for your assistance
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.

Answer 1

There is a known bug in bootstrap, according to this post :
Bootstrap 3 nav dropdown
You have to add some CSS to fix it :
.navbar-collapse.in {
overflow-y: visible;
}

Answer 2

This a demo page you need to modify as you needs..DEMO Page
HTML part
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Application</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul></div>
</div></nav>

Answer 3

I found the solution to my problem.
The solution was adding .in class to the data-target attribute of the li elements on the navbar.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Web</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar.in">Home</li>
<li data-toggle="collapse" data-target="#navbar.in">Proyecto</li>
<li data-toggle="collapse" data-target="#navbar.in">Galería</li>
<li data-toggle="collapse" data-target="#navbar.in">Planos</li>
<li data-toggle="collapse" data-target="#navbar.in">Ubicación</li>
<li data-toggle="collapse" data-target="#navbar.in">Contacto</li>
</ul>
<ul class="nav navbar-nav">
<li style="font-size:12px"><a>(54+11) 4444-4444</a></li>
</ul>
</div>
</div>
</div>
</nav>

Answer 4

Maxime Mettley's comment helped. Thank you. But since I was seeing a scrollbar during the collapsing activity, I needed to fix it like this:
.navbar-collapse.in, .navbar-collapse.collapsing {
overflow-y: visible;
}
Bootstrap applies the "collapsing" class as the menu collapses, then "in" once the collapse is complete. I hope this helps someone else.