Astuce Bootstrap/menu déroulant

[Nana-Pocket]

Bonjour,
J'ai découvert un "bug" dans MON menu déroulant, fait avec Bootstrap.
J'ai testé ce menu avec Chrome, Opéra, et Firefox. Le menu fonctionne, dans le sens ou il se déroule et où tous les liens s'ouvrent. Mais, si je l'ouvre sur un mobile, le menu est bien un "hamburger", qui se déroule mais...les liens ne s'ouvrent que sur demande et dans un autre onglet . Je n'ai pas lu ou trouvé une explication, et je me demande s'il faut modifier mon code.

Voici le code "menu":


<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">


<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#custom-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="en-index.html">Mas Conil</a>
</div>
<div class="collapse navbar-collapse" id="custom-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a class="dropdown-toggle" href="en-index.html" data-toggle="dropdown">Home</a>
<ul class="dropdown-menu">
<li><a href="de-index.html">Auf Deutsch</a></li>
<li><a href="index.html">En français</a></li>
</ul>
</li>

<li class="dropdown"><a class="dropdown-toggle" href="en-culinary.html" data-toggle="dropdown">Dining</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-toggle" href="en-culinary.html#Dine" data-toggle="dropdown">Dine</a>
</li>
<li class="dropdown"><a class="dropdown-toggle" href="en-culinary.html#Drink" data-toggle="dropdown">Drink</a>
</li>
<li class="dropdown"><a class="dropdown-toggle" href="en-culinary.html#Cook" data-toggle="dropdown">Cook</a>
</li>
<li class="dropdown"><a class="dropdown-toggle" href="en-culinary.html#Grow" data-toggle="dropdown">Grow</a>
</li>

</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html" data-toggle="dropdown">Rooms</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Alzon" data-toggle="dropdown">Alzon</a> </li>

<li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Bourdic" data-toggle="dropdown">Bourdic</a></li>

<li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Esquielle" data-toggle="dropdown">Esquielle</a></li>

<li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Gardon" data-toggle="dropdown">Gardon</a></li>

<li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Seynes" data-toggle="dropdown">Seynes</a> </li>

</ul>
</li>
</ul>
</div>
</div>
</nav>


Merci d'avance, c'est vraiment le genre de détail qui me "bouffe" mon énegie de retraitée...

 

[yule]

Hello,

Que veux -tu dire par "les liens ne s'ouvrent que sur demande", comme ça je vois pas trop.

Essaye de jeter un oeil ici : https://mdbootstrap.com/docs/jquery/navigation/navbar/ Réduit ta page pour simuler un écran mobile... Essaye d'adapter selon ton menu le plus proche

Sinon essaye ici : https://mdbootstrap.com/snippets/jquery/temp/2135143?action=prism_export

Le Dropdown se trouve sur bootstrap.js... Je ne pense pas que ça vienne de là. tu te souviens pas ou tu l'as recopié ?

Bonne bonne
Yule

 

[spout]

Ce serait plus simple de montrer un exemple live de ton site ou JSFiddle.

 

[Nana-Pocket]

Hello,

Que veux -tu dire par "les liens ne s'ouvrent que sur demande", comme ça je vois pas trop.

Essaye de jeter un oeil ici : https://mdbootstrap.com/docs/jquery/navigation/navbar/ Réduit ta page pour simuler un écran mobile... Essaye d'adapter selon ton menu le plus proche

Sinon essaye ici : https://mdbootstrap.com/snippets/jquery/temp/2135143?action=prism_export

Le Dropdown se trouve sur bootstrap.js... Je ne pense pas que ça vienne de là. tu te souviens pas ou tu l'as recopié ?

Bonne bonne
Yule

Merci d'avoir tenté de comprendre.
Mon site est le premier que je "construis". Je profite de ma très récente retraite pour me lancer. Et C'est un nouveau monde pour moi. Donc mille excuses pour les termes non adéquats. Voilà, j'attaque.
J'ai téléchargé un thème Bootstrap, et ce thème fonctionne parfaitement, je l'ai retesté. Le seul changement que j'ai effectué concerne quelques lignes du CSS mais aucunement dans la partie menu.
Lorsque je touche l'écran du mobile, le menu se déroule. Lorsque je veux ouvrir une autre page je touche la page désirée qui figure dans ce menu. Pas de réaction. Je dois rester plus longtemps sur la ligne du menu que j'ai voulu ouvrir et le choix, entre autres, "ouvrir la page dans un nouvel onglet" apparaît. De plus, comme je n'ai qu'un mobile, j'ai téléchargé sur Opéra et sur Chrome une extension qui me permet de "voir" comment la page se comporte sur un mobile (responsive ou non, images etc...) et j'ai le même problème: la page souhaitée ne s'affiche pas....
Est-ce un peu plus compréhensible?
Merci encore.

Je vais tenter les deux liens, et je reviens pour info.

 

[Nana-Pocket]

Ce serait plus simple de montrer un exemple live de ton site ou JSFiddle.

Merci d'avoir pris le temps de répondre.
Mon site est en construction, je progresse lentement. Donc, au niveau de mes connaissances, difficile de montrer un exemple live. Car il faut également transférer le CSS et le JS à moins que je fasse erreur..
Je suis preneuse de toutes les suggestions.
Merci encore et bonne journée

 

[yule]

Re,

Et sur l'exemple utilisé (le téléchargement du thème) ça fait la même problématique ? Si oui,
Merci de donner le lien du template utilisé, ça nous donnera déjà une idée

A+
YUle

 

[Nana-Pocket]

Re,

Et sur l'exemple utilisé (le téléchargement du thème) ça fait la même problématique ? Si oui,
Merci de donner le lien du template utilisé, ça nous donnera déjà une idée

A+
YUle

Re-Bonjour!
J'ai visité avec attention vos liens, et j'ai réussi 1. à corriger MON bug et 2. à comprendre.
En fait, j'ai "surchargé" les balises <li> de mes sous-menus.
En passant de :
<li class="dropdown"><a class="dropdown-toggle" href="en-rooms.html#Gardon" data-toggle="dropdown">Gardon</a></li>
à
<li><a href="en-rooms.html#Gardon">Gardon</a></li>
je peux avoir accès aux pages souhaitées sur le mobile.

Le thème choisi pour Bootstrap n'avait pas le même menu, j'ai voulu faire LE MIEN, en croyant que j'avais compris, et voilà....

Encore merci de m'avoir consacré du temps, pour moi, ça valait la peine. Je passe aux détails suivants, et peut-être reviendrais-je si besoin est.
Bien sûr, lorsque le site sera terminé je vous le soumettrai.
Bonne fin de semaine