i have a website that use bootstrap 2.1.1 and the navbar on mobile device as a bug. When i click on the drop down icon, the navbar open very fast and collapse after that. When i reclick, it open normally, but if i click on the Produits dropdown that i sinside the original one, it open ok but when i click on a link inside this dropdown it seems to click on a link inside the background where another link was before i dropdown the menu. The navbar code is as follow:
<div class="row">
<div class="col-md-12">
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id=navbar-1>
<ul class="nav navbar-nav">
<li id="home-lnk"><a href="/">Accueil</a></li>
<li id="produits-lnk" role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" role="button" aria-haspopup="true" aria-expanded="false">
Produits <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li id="system-lnk"><a href="/systeme">Système de gestion automatisé</a></li>
<li id="releasers-lnk"><a href="/relacheurs">Relâcheurs / Trappe à humidité / Panier Balle</a></li>
<li id="vacuum-lnk"><a href="/pompes_vacuum">Pompes Vacuum</a></li>
<li id="modulation-lnk"><a href="/controleur_modulation">Contrôleurs de modulation pour pompe vacuum</a></li>
</ul>
</li>
<li id="team-lnk"><a href="/equipe">Équipe</a></li>
<li id="contact-lnk"><a href="/contact">Contact</a></li>
<!--<li id="ditributors-lnk"><a href="/distributeurs">Distributeurs</a></li>-->
<li id="catalog-lnk"><a target="_blank" href="/files/Catalogue_ErabliTEK_2019.pdf">Catalogue (PDF)</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="http://admin.erablitek.com">Connexion</a></li>
</ul>
</div>
</div>
</div>
</div>
In the homepage HTML, line 22:
<script type="text/javascript" src="/js/require.js" data-main="/js/common.js"></script>
Inside common.js, line 19 :
bootstrap: '/js/lib/bootstrap.min',
I discovered that the site loads several incompatible versions of Boostrap at the same time, notably 3.3.7 from a CDN and also 2.2.1 locally (via /js/lib/bootstrap.min') via /lib/common.js [and also other old stuff like jQuery 1.7!], and possibly other conflicting libraries. I conclude that since common.js is loaded after version 3.3.7 of the CDN, it overrides the latter and that's a bug, because if you launch the homepage just with 3.3.7 there is no bug in fact in the mobile nav: see copden :
https://codepen.io/larrytherabbit/pen/gOrvzbj
Anyway, if you take a look at my codepen, the nav mobile works 100% well. And it's 3.3.7 that is present (I think), which makes me think that the problem is there, or at least partly.
So, if you're going to modify /lib/common.js and remove the old libraries, I think it'll be fine. If it doesn't work, come back to me and I'll take another look.