[RÉGLÉ] Menu horizontal devient vertical

[pjuignet]

Bonjour,
Suite aux conseils de toffffe j'ai créé un menu horizontal rétractable mieux adapté aux mobiles.
Bizarrerie, ce menu horizontal devient vertical pour les écrans entre 990 et 770 pixels de large . ça chasse le contenu vers le bas de 10 centimètres ce qui nuit fortement à l'ergonomie du site.
Ensuite il passe en "burger" ce qui est attendu.
https://philosciences.com

Quelqu'un a-t-il déjà vu ce problème ?

[RobertG]

Bonjour,

Peut-être est-ce ce dont tu as besoin (j'avais rencontre le même problème il y a quelques temps) ?

https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4

[pjuignet]

Bonjour Robert,
Merci pour ces scripts .
Je ne vais pas m'y lancer. Trop complexe et il y a un risque de conflit avec le template cassiopéa de base et de créer d'autres erreurs.
Bonne journée.

[sarki]

Hello,
Le principe des templates est de dire qu'à partir, ou jusqu'à cette taille, on affiche ceci et non pas cela.
Il suffirait donc de regarder le code CSS qui fait masquer le menu horizontal et afficher le vertical, et l'adapter dans un fichier CSS personnalisé qu'il est simple de créer depuis la gestion des templates.
Si tu me donnes l'URL du site, je peux jeter un oeil et te guider pour cela, l'avantage est que tu n'installes rien et ne risque aucun conflit.

[pjuignet]

Bonjour Sarki
ça fait plaisir de te lire.
J'ai fait un second menu. Comme dit précédemment pour le format tablettes il s'affiche verticalement.
Mais il y a aussi qu'il créée des interférences : en desktop il fait disparaître le menu principal et le module de recherche qui sont dans la colonne de droite.
Trop de problèmes, je renonce.
Après tout ce n'est pas grave si les mobiles ont le menu en bas plutôt qu'en haut.
Merci pour ton aide.

[RobertG]

J'utilise ce script sans la moindre erreur, il est fait pour Caaiopeia.

[toffffe]

Salut
Tu pourrais aussi gérer l'ordre d'affichage des colonnes pour que ton menu soit présent avant le contenu sur mobile avec order-*
Sinon tu peux aussi utiliser le plugin ck https://www.joomlack.fr/extensions-j...mobile-menu-ck qui permet de transformer n'importe quel menu en version mobile

[sarki]

Hello pjuignet,
Je n'avais pas réalisé que c'était toi car j'avais pas vu l'URL du site...
Après être allé voir ce que tu voulais dire par le menu en bas en version mobile qui me surprenait, je vois que tu l'as mis en position de droite, position qui en effet passe en bas de page en version mobile.
Personnellement je ne laisserai pas comme ça, tes articles sont longs, ont a l'habitude d'avoir le menu en haut, ils vont être nombreux à se tromper régulièrement et ça va les agacer, en tout cas ce serait mon cas
Je te propose de faire un second menu si tu veux le laisser à droite pour les versions ordi, et de le mettre en position "menu", je te fournirai le code à ajouter dans le fichier user.css pour qu'il soit caché au-dessus de 576px qui est la taille utilisée en général pour les éléments attribués aux mobiles

[toffffe]

Personnellement je ne laisserai pas comme ça, tes articles sont longs, ont a l'habitude d'avoir le menu en haut, ils vont être nombreux à se tromper régulièrement et ça va les agacer, en tout cas ce serait mon cas

Je partage complètement ton avis et c'est pour cela que je lui ai souligné dans un autre post où pjuignet présentait son site. I ne faut pas oublier que beaucoup des personnes naviguent sur mobile.

[sarki]

Je n'avais pas vu ton message précédent toffffe, on devait l'écrire en même temps
Ta proposition est encore plus simple

[toffffe]

sarki :-)
Le problème de ma solution est que tu ajoutes une extension supplémentaire

[pjuignet]

Bonsoir toffffe,

Tu pourrais aussi gérer l'ordre d'affichage des colonnes pour que ton menu soit présent avant le contenu sur mobile avec order-*

Comment fait on ça ?

[toffffe]

Voici un exemple qui explique comment faire avec boitstrap https://www.booglit.com/comment-chan...e-bootstrap-5/

[pjuignet]

J'ai regardé cette solution. Elle est élégante mais ne me convient pas car ça va déplacer toute la barre latérale, qui contient d'autre choses que le menu.

[pjuignet]

Hello pjuignet,

Personnellement je ne laisserai pas comme ça, tes articles sont longs, ont a l'habitude d'avoir le menu en haut, ils vont être nombreux à se tromper régulièrement et ça va les agacer, en tout cas ce serait mon cas
Je te propose de faire un second menu si tu veux le laisser à droite pour les versions ordi, et de le mettre en position "menu", je te fournirai le code à ajouter dans le fichier user.css pour qu'il soit caché au-dessus de 576px qui est la taille utilisée en général pour les éléments attribués aux mobiles

Comme dit plus haut un second menu (mis en position menu) interfère avec le premier et la barre latérale et crée des problèmes.
J'ai trouvé une ruse : avoir un seul menu principal et utiliser deux modules, qui placent le même menu principal en position menu (en haut) et en latéral. ça marche, les deux coexistent pacifiquement.

Mais pour les écrans entre 990 et 770 le menu du haut, de horizontal devient vertical et ça chasse le contenu vers le bas de 10 centimètres ce qui nuit fortement à l'ergonomie du site.
Ensuite pour les mobiles il passe en "burger" ce qui est attendu.
Pour une valeur d'écran sous 990 Cassiopéa met la barre latérale en position inférieur, ce qui est voulu, mais décide aussi de passer le menu haut de horizontal à vertical, ce qui est ennuyeux.

RobertG a eu le même problème mais la solution qu'il a adoptée est trop complexe pour moi (Offcanvas Menu for Cassiopeia)

https://philosciences.com