[Problème] Refermer menu hamburger latéral ?

[RobertG]

Bonjour,

Sur un site que je viens de migrer en J4, j'utilise avec Cassiopeia le code "offcanvas-metismenu" de DrMenzel https://www.dr-menzel-it.de/blog/off...uer-cassiopeia pour générer un menu hamburger sur les écrans moyens.
J'utilisais le code sur Github, je suis passé à celui de l'article de blog, mais rien n'a changé.
Sur ce site, j'ai deux menus : un horizontal en position "menu", un autre en position "sidebar-left".
J'ai forcé dans le user.css la présentation pour remonter la colonne gauche avant le contenu principal sur ces petits écrans.

Dès que les menus passent en mode hamburger, si le menu horizontal se referme dès que j'ai cliqué sur un lien, le menu de gauche reste ouvert et oblige à scroller pour voir le contenu.

Y aurait-il un moyen de forcer cette fermeture ou faut-il reconsidérer la construction de ce menu vertical ?
Merci de vos conseils !

PS : j'ai aussi essayé les paramètres standard de Cassiopeia, sans changement.

[RobertG]

J'ai fait beaucoup de modifs sans succès avant de restaurer la sauvegarde.
Ce que je ne comprends pas non plus, c'est que sur ce site, et contrairement à d'autres, je n'ai pas d'affichage du bouton de fermeture.
Pour le menu rincipal, ce code fait apparaître ka croix de fermeture dont je n'ai pas besoin, mais pas pour l'autre.

.btn-close-white {
  -webkit-filter:none;​
}

[RobertG]

Bon, finalement avec un z-index, j'ai pu voir la croix de fermeture sur mon écran de PC rétréci, mais pas sur le smartphone où le contenu déborde et la croix se trouve hors-champ.
Reste à trouver pourquoi ce menu ne se ferme pas seul comme le menu principal...

[RobertG]

Bonjour, un max-width ramène la croix de fermeture dans la zone visible de mon smartphone, mais ce n'est vraiment pas pratique de demander au visiteur de cliquer dessus pour voir le texte.

.offcanvas-header {
max-width:90% !important;
}

[RobertG]

Bonjour,

Manifestement, c'est le code permettant de jouer un son sur le site qui est en cause. Si neutralise l'index.php du template enfant, les choses rentrent dans l'ordre, mais pas de son.

[Visiteur]

window.addEventListener('load', function(){ jQuery(document).ready(function()
pour éviter les conflits de cliques

[RobertG]

Je ne vois pas à quoi tu fais allusion. Comme je l'ai dit ailleurs, JS et moi sommes deux étrangers.
Le code utilisé pour le son est du JS que tu peux voir dans le site exemple de daneel : il n'y a pas de window.onload

https://forum.joomla.fr/forum/joomla-4-x-aa/questions-g%C3%A9n%C3%A9rales-aa/2053498-jouer-un-fichier-audio-sans-relancer-au-changement-de-page

J'ai essayé d'utiliser la récupération de la taille de l'écran qui sert actuellement seulement pour désactiver le clic qui déclenche ce son, pour l'appliquer à l'ensemble du script, mais ça ne change rien.
Je me pose donc deux questions : comment englober toute cette série de scripts pour ne les charger que si la résolution ne correspond pas à un petit écran ? et si ce n'est pas possible, comment définir un template différent pour ces petits écrans, sachant que j'utilise un template enfant de Cassiopeia.
Il fut un temps où il existait des extensions pour ça, avant les templates responsive, et n'en ayant pas eu besoin, je ne m'y suis pas intéressé.

Trouvé, mais les réponses aux questions précédentes m'intéressent, s'il y en a.
En ne chargeant le script Ajaxify que pour les écrans de largeur supérieure ou égale à 992, le problème est résolu.
Il restera à confirmer sur différents écrans.

[Visiteur]

Robert tu es me meilleurs