[RÉGLÉ] Menu inaccessible sur petits écrans (Cassiopeia)

[RobertG]

Bonjour,

Je me bats avec Cassiopeia, une fois de plus !
Sur un site que je viens de migrer sans le moindre incident en local, avec le menu principal en position "menu", style "collapsible dropdown", d'abord j'ai ce satané menu en vertical sur les écrans intermédiaires (< 992 px), ensuite pour les plus petits, même pas de hamburger.

En ajoutant les fichiers de Viviana Menzel, je n'ai plus le menu vertical, mais bien le hamburger, à ceci près qu'un clic dessus affiche un voile gris partiellement transparent devant le site, mais pas le moindre lien de menu !


Qui aurait une idée d'explication de cette disparition du contenu du menu ? Qu'ai-je oublié de faire ?

PS : le code destiné à l'affichage est bien présent dans le source, ce voile semble être le fond du menu, et je n'ai pas d'erreur JS dans la console

[pmleconte]

Bonjour,

Je viens de faire des essais avec les infos. fournies par Vivana et cela fonctionne correctement.

Si tu as l'écran grisé, c'est que la détection "petit écran" fonctionne.

En regardant dans le css, l'apparition du menu est assurée par une ligne qui contient
.offcanvas.hiding, .offcanvas.show, .offcanvas.showing {visibility: visible;}

Cela vient du css/template.min.css

Donc, vois-tu cette ligne dans ta console ?

Pascal

[RobertG]

Bonjour,

Ce que je ne comprends pas, c'est que lorsque je n'utilise pas le code de Viviana, le menu habituel, hamburger, ne s'affiche pas sur petits écrans, il est totalement invisible, et j'ai beau chercher, je ne trouve pas cette ligne dans le code source de la page, que le layout metismenu.offcanvas sélectionné ou seulement collapsible dropdown.

Pourtant, j'ai mis en J4 pas mal de sites et utilisé Cassiopeia, sans rencontrer ce type d'anomalie...

[pmleconte]

Ton menu doit être en dehors de l'écran.

Quand tu cliques sur le hamburger, as-tu la div avec les offcanvas ?



et j'ai le css suivant:



Pascal

[RobertG]

Bonjour,

Testé en utilisant le code de Viviana :
La ligne est comparable, suit le contenu du menu qui ne s'affiche pas.
En explorant, le positionnement est top:0 et left:0, la zone d'affichage apparaît bien, 400*467, conteneur Fex.
Le survol du code montre bien les positions des liens de menu, mais vides.
Je ne vois pas de "offcanvas.show;not(.hiding)" dans le css, seulement offcanvas.show

[RobertG]

Très curieux ! Après avoir dépublié un changement de taille de police pour le menu, que j'avais ajouté dans le user.css, le menu s'affiche sur les petits écrans, il me reste à en changer le fond (bleu).
Je ne comprends vraiment pas le rapport entre cette définition de taille de police (pour les écrans >992 px) et l'affichage. C'est comme s'il n'y avait pas de définition de taille par défaut, qui mettrait cette taille à 0 pour les petits écrans !

[RobertG]

Bien, question d'affichage du menu réglée, il me reste à comprendre pourquoi le titre de sous-menu "SOLUTIONS" n'utilise pas la même police que les autres liens, qu'il soit en séparateur ou titre de sous-menu.

[RobertG]

Bonjour,

J'ai beau chercher, je n'arrive pas à uniformiser l'affichage des liens de menu et le titre de sous-menu (ou séparateur).
Aucune instruction spécifique au menu n'est présente dans le fichier user.css
Dans l'image au-dessus, la police utilise ce poids

.site-grid, .navbar-expand-md , .grid-child, .mod-custom{    
    font-weight:600;
}​

Si je neutralise cette ligne, le contraire se produit (première ligne ci-dessous, la deuxième utilisant ce code forçant à 600), .

Il semblerait que le titre de sous-menu échappe totalement à cette personnalisation : à mes yeux, dans les deux images, "SOLUTIONS" ne change pas de paramétrage

Je craque !