Menu de navbar qui disparait

ToinouPHP
Javascript

Bonjour, pour un exercice dans ma formation, je dois créer un site web pour une association fictive.

J'y utilise Bootstrap et le problème est dans ma navbar :
En mode mobile, lorsque je clique sur les 3 lignes du menu ( Pour faire apparaitre le menu de la navbar ), le menu apparait pendant 1s, puis disparait et je ne comprend pas. ( Il semblerait que j'ai toujours été nul pour les navbars. >< )

Si quelqu'un pouvait m'aiguiller, ça m'aiderais beaucoup !

Mon code :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="index.php" id="brand">
    <img src="assets/img/feather.png" alt="logo" style="width: 30px">

   Charmed Plume Productions</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" id="li_accueil">
        <a class="nav-link" href="#" id="see_accueil">Accueil <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" id="li_whoarewe">
        <a class="nav-link" href="#" id="see_whoarewe">Qui sommes nous ?</a>
      </li>

      <li class="nav-item" id="li_event">
        <a class="nav-link" href="#" id="see_futur-events_navbar">Evenements</a>
      </li>

    </ul>

  </div>
</nav>

5 réponses

Aecy

Bonjour,

As-tu bien importé le js de bootstrap ainsi que le reste ?

ToinouPHP
Auteur

Je viens d'ajouter bootstrap et jquery, ça fonctionne, mais y a toujours cet espece de "clignotement", quand je l'ouvre, ça s'ouvre, ça disparait puis ça réapparait. Mais le menu fonctionne, hormis ça.

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Aecy

Désolé, j'ai déménagé aha.

Le soucis est toujours présent ?

ToinouPHP
Auteur

j´ai aussi démenagé haha
et oui le soucis est toujours présent

BurnItAll

Salut,

As-tu declaré d'autres elements dans ta page avec la règle css "z-index"?
Peut-être que le composant "nav-bar" de bootstrap applique dynamiquement des règles d'index ce qui peut provoquer des effets indésirables, du fait qu'il "traverse" le DOM jusqu'à être à son index le plus élévé?