Bonjour,

Après avoir mis mon site à jour j'ai remarqué que l'icone Menu en version mobile responsive ne fonctionnait plus: je clique (sur ordi) ou tappe (sur portable) sur l'icone Menu mais le dropdown ne s'ouvre pas.

  • Seules l'icone Menu des pages internes du site sont touchées (cliquer sur l'icon Menu n'ouvre pas le drop down).
  • Cliquer/tapper sur l'icone Menu de la page Index (mobile responsive) marche correctement.
  • Du point de vue css, les deux fichiers qui sont concernés sont: style.css (style general du site) et un bootsrap.css (navigation essentiellement).

Alors j'ai comparé:

  • J'ai aligné l'ordre d'appel de mes stylesheets dans la partie Head d'une page interne (juste pour voir) à celle de la page Index mais sans changement.
  • En inspectant mon site, je note une différence dans le code qui ne figure pas dans mon fichier html. La fonction "aria-expanded="false"" n'apparait pas sur les pages internes comparé à la page index (seulement visible en inspectant mon code en ligne), alors comment puis-je la rétablir sur mes pages internes? (voir code ci-dessous)

Page index (inspect mode):

<button type="button" class="navbar-toggle" data-toggle="dropdown" data-target=".navbar-ex2-collapse" aria-expanded="false">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
               </button>

Page interne (inspect mode):

<button type="button" class="navbar-toggle" data-toggle="dropdown" data-target=".navbar-ex2-collapse">
              <span class="sr-only"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
           </button>
  • En relisant mes fichiers html, seul la destination des liens change. Mais je ne pense pas que ce soit ça, puisque c'est le drop down que je n'arrive pas à ouvrir, pas les liens. Enfin on ne sait jamais.

Fichier html de la nav page index:

<nav class="navbar navbar-default navbar-fixed-top visible-sm visible-md visible-lg" role="navigation">
         <div class="container">
            <div class="navbar-header page-scroll">

               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
               </button>

               <div class="logo">
                  <a class="navbar-brand page-scroll" href="#page-top"></a>
               </div>
               <div class="collapse navbar-collapse navbar-ex1-collapse" >
                  <ul class="nav navbar-nav" >
                     <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                     </li>
                     <li>
                        <a class="page-scroll" href=".contact">CONTACT</a>
                     </li>
                     <li>
                        <a class="page-scroll" href=".recommendations">ABOUT</a>
                     </li>
                     <li>
                        <a class="page-scroll" href=".work">WORK</a>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </nav>

Fichier html de la nav page interne:

      <nav class="navbar navbar-default navbar-fixed-top visible-sm visible-md visible-lg" role="navigation">
     <div class="container">
        <div class="navbar-header page-scroll">

           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
           </button>

           <div class="logo">
              <a class="navbar-brand page-scroll" href="../index.html"></a>
           </div>
           <div class="collapse navbar-collapse navbar-ex1-collapse" >
              <ul class="nav navbar-nav" >
                 <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                 </li>
                 <li>
                    <a class="page-scroll" href=".contact">CONTACT</a>
                 </li>
                 <li>
                    <a onClick="document.location='../index.html#recom'">ABOUT</a>
                 </li>
                 <li>
                    <a onClick="document.location='../index.html#workwork'">WORK</a>
                 </li>
              </ul>
           </div>
        </div>
     </div>
  </nav>

Merci d'avance pour toute aide que vous pourrez m'apporter.
Karine

Aucune réponse