[RÉGLÉ] Menu sous Cassiopeia

[RobertG]

Bonjour,

J'ai un souci de présentation du menu sur un site récemment migré et en cours de finalisation avant mise en ligne.
Le menu prend toute la largeur de la fenêtre du navigateur en résolution 1600 (site en affichage fluide) et pour les résolutions inférieures, avant d'atteindre la largeur qui empile les liens avec le type collapsible dropdown, le menu est tronqué :



J'ai installé le code de Dr Menzel (offcanvas), mais quel que soit le choix, offcanvas-metismenu ou collapsible dropdown de Cassiopeia (en neutralisant le CSS personnalisé), rien n'y fait, les liens de droite ne passent pas en deuxième ligne.

Le template est un enfant, et le seul code CSS personnalisé est celui d'offcanvas.
Je ne vois vraiment pas comment gérer ça. Je ne me souviens pas avoir eu ce comportement sur d'autres sites.

Merci de vos conseils !

[woluweb]

ha pardon, j'avais compris que tu voulais basculer plus vite en hamburger, pas que tu voulais avoir le menu sur 2 lignes.

Je viens de tester sur un de mes sites.
En ajoutant flex-wrap: wrap; au sélecteur CSS du module de menu, ça le fait.
Exemple :

@media (width >= 992px) {
.container-header .mod-menu {
flex-direction: row;
flex: 1;
display: flex;
flex-wrap: wrap;
}
}

[woluweb]

Salut RobertG

Va voir sur https://slides.woluweb.be/cassiopeia...-small-screens

Comme j'indique à la fin de ce point, tu peux changer le moment (la largeur d'écran) auquel on bascule en mode "hamburger menu" :

If you want to change the current breakpoint (between offcanvas and full regular menu), simply change the following class navbar-expand-lg into navbar-expand-xl (offcanvas will prevail longer) or navbar-expand-md (offcanvas will prevail less longer) for example.

[RobertG]

Merci Marc, c'est une chose à laquelle j'avais pensé, mais il faudrait passer en hamburger dès un peu moins de 1600 px, le menu est large.
N'y a-t-il pas une solution pour passer sur deux lignes ?

[woluweb]

ha pardon, j'avais compris que tu voulais basculer plus vite en hamburger, pas que tu voulais avoir le menu sur 2 lignes.

Je viens de tester sur un de mes sites.
En ajoutant flex-wrap: wrap; au sélecteur CSS du module de menu, ça le fait.
Exemple :

@media (width >= 992px) {
.container-header .mod-menu {
flex-direction: row;
flex: 1;
display: flex;
flex-wrap: wrap;
}
}

[RobertG]

Un grand merci, Marc !
C'est parfait !