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