Discussion :

[pierrot10]

Bonjour à tous,

Il y a un peu plus d'une année j'avais fais ceci
http://www.le-lacustre.ch/ (Ce site va etre fermé)
Si vous dimimuer le navigateur vous allez voir que les item du menu s'empile dans un dropdown menu.

J'avais utilisé une librairie dont je ne retrouve plus trace.
Les fichier que j'inclus sont

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<script src="js/tutorial.js"></script>
<link href="/manager/templates/lacustre/css/tutorial.css" rel="stylesheet">

Le problème est que je n'arrive pas à l'implémenter dans mon nouveau site sauf si j'utilise bootstrap 3.3.5.
Dans ce nouveau site http://www.shiatsu-energie-geneve.ch/new/ j'utilise bootstrap 4.0.5 et jquery3.3.1.
En plus même avec la derniere version de jquery, ca bug.

L'autre truc, il faut que le menu du nouveau site, soit comme il l'est actuellement, soit qu'il prenne toute l'espace de la largeur. Ce qui n'est pas le cas de l'ancien site.

Etant donné que j'ai déja passé un temps de fou a essayer de faire marché tutorial.js sur mon nouveau site, j'ai décidé de laisser tombé cette librairie et je me retourne vers vous, pour savoir si vous connaitriez une solution qui fonctionne avec les dernières versions de Bootstrap et Jquery?

Il faudrait que des que le navigateur à une largeur de 361+ 221px (il y a des chiffres qui s'affichent quand on change la largeur du navigateur), les éléments du menu commence a s'empiler dans un dropdown menu, à droite

Y-a-til une solution existante?
Ou pourriez-vous me pister pour accomplir ceci?

Milles merci!!

[Invité]

Bonjour,

• Bootstrap 4 - Navbar
• Bootstrap 4 - Exemples

1- Il faut respecter la syntaxe spécifique Bootstrap 4, et l'imbrication des menus/sous-menus.
(mais à priori, tu n'as pas de sous-menus : ça simplifie)

Au cas où tu ajouterais des sous-menus :
Tu peux aussi lire cette discussion récente.

2- Quant à l'alignement, on en a parlé dans ton autre discussion.

[pierrot10]

Bonjour Jeraux,

Merci pour ta réponse.
Alors j'avoue avoir très mal commencé ce site!!
Je viens de reviser le code du menu en fonction de
https://getbootstrap.com/docs/4.2/components/navbar/
et c'est chose faite.
http://www.shiatsu-energie-geneve.ch/new/#
(je dois encore regardé à ce que le premier et dernier élément du menu collent sur les bors respectifs. Mais je verrai ceci avec ma graphiste. Peut etre qu'elle accepetera ceci.

Par contre, pour le sujet de cette discussion, je n'arrive toujours pas à faire que les les éléments s'empilent dans le boutton (navbar-toggler) l'un après l'autre au fure et à mesure que le browser diminiue. (Je pense que c'est plus une solution Jquery que CSS, raison pour laquelle je suis venu sur ce forum).

[Invité]

1- Ceci devrait convenir :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
@media screen and (min-width:992px) {
  /* étalement des menus */
  .navbar-collapse ul.navbar-nav {
    justify-content:space-between;
    width:100%;
  }
}

2-

...que les éléments s'empilent dans le boutton (navbar-toggler) l'un après l'autre au fure et à mesure que le browser diminiue....

Ca, ce n'est pas prévu dans Bootstrap !
Le "burger" apparait sous les 992px, avec TOUS les menus dedans.

Conseil: ÉVITE de (trop) perturber les habitudes des internautes.

[Invité]

Je viens de trouver dans la doc Bootstrap 4 : Justify content

Au lieu code code CSS que j'ai donné, il suffit d'ajouter au <div> entourant le menu <ul> (à tester *) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="d-flex justify-content-md-between">

A voir si il te faut justify-content-between, ou justify-content-md-between, ou...

[EDIT] J'ai testé ici, mais ça n'a pas fonctionné...
Alors qu'avec mon code, oui.

[pierrot10]

Merci beaucoup jeraux, t'es top.
Je vais regardé ceci un peu plus tard, car je suis sur deux job