Button navbar ne se déroule pas quand on clique...

Bonjour à tous !

Alors voilà je ne comprends pas, quand je mets mon siteweb au format mobile, mon menu se transforme en bouton et est censé faire dérouler les différents menus de ma navbar, seulement voilà, quand on clique sur le bouton rien ne se passe

Une idée de ce que celà peut être, je relis mon code et ne trouve pas

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <a href="#home" class="logo"><img src="img/idem.png" alt="logo" width="65" height="40"></a>
 
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span> 
 
    </button>
 
    <div class="collapse navbar-collapse navHeaderCollapse">
    <ul class=" menu nav navbar-nav navbar-right espace5">
    <li><a href="#home">Home</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
    <li>  <a href="https://www.instagram.com/idem_bxl/" target="_newblank"><img src="img/instagram.png"  width="25" alt="ig" title="ig" ></a></li>
    <li>  <a href="https://www.facebook.com/IdemBrussels/?fref=ts" target="_newblank"><img src="img/facebook.png" width="25" alt="fb" title="fb"></a></li>
    <li>  <a href="https://www.youtube.com/watch?v=xNOtmYHY1fg" target="_newblank"><img src="img/youtube.png" width="25" alt="yt" title="yt"></a></li>
 
 
 
 
 
 
 
    </ul>
        
 
    </div>
             
    </div>
</div>

Bonjour,

As-tu inclus le fichier javascript de Bootstrap à ta page ?

Oui les deux fichiers sont là pourtant

Et as-tu essayé avec le code en exemple dans la doc ?

Au moins pour définir si le problème vient de ton markup HTML ou d'ailleurs.
Modifié par mob (08 Feb 2017 - 16:54)

Hello

Balo a écrit :
Oui les deux fichiers sont là pourtant

Les fichiers sont-t-ils appelés dans le bon ordre ?

J'ai crée la nav bar dans un fichier html ou celà fonctionnait parfaitement puis quand je l'ai intégré au fichier html de mon siteweb ça ne fonctionnait plus

Bonjour,

ça ne vient pas de ton code puisque ce Bootply fonctionne : http://www.bootply.com/wt5VW84861 (il y a une icône "vue mobile" à droite qui ouvre une popup)

Quel JS charges-tu ? As-tu essayé avec le "all.min.js" (nom approximatif) ?

Balo a écrit :
J'ai crée la nav bar dans un fichier html ou celà fonctionnait parfaitement puis quand je l'ai intégré au fichier html de mon siteweb ça ne fonctionnait plus

Ah (après lecture de ta dernière réponse). Y aurait-il dans le code HTML de ta page plusieurs fois la classe référencée par ton data-target=".navHeaderCollapse" càd class="navHeaderCollapse" ?
Pour s'en assuer, dans la console (F12, chercher la console) tu peux taper $('.navHeaderCollapse').length et le résultat doit être 1, pas plus (utilise alors un id) ni moins (t'as pas inclus correctement le menu ??)
Dans l'onglet HTML/CSS (des DevTools de Firefox), j'observe ceci après avoir cliqué :



On peut y voir qu' :
- il y a un cartouche (ev) signe que le JavaScript qui va bien est actif,
- au clic sur (ev), 1 seule ligne pas 2 (la blague du même script chargé 2 fois et où le 1er ouvre le menu tandis que le second le referme... Sigh),
- la ligne du dessous montre le DOM modifié par le script une fois le menu ouvert.Si tu vois la même chose mais que visuellement le menu est fermé, il y a un problème de CSS, pas de JS
Modifié par Felipe (08 Feb 2017 - 17:26)

Problème reglé en rajouter le bootstrap.min.js

Pourtant j'apellais déjà le bootstrap.js

une idée de pourquoi celà marche maintenant?

Merci pour vos réponses