afficher le menu hamburger sur tous les média

[wd_newbie]

Bonjour à tous ,

Savez-vous si il est possible d'afficher le menu hamburger sur tous les médias, y compris les ordinateurs ?

[wd_newbie]

Réponse à moi même ... certainement en jouant sur le css avec le @media() ... à suivre si j'en ai l'utilité un jour

[daneel]

Bonjour,

Certains templates Joomla proposent effectivement un menu « off-canvas » qui s'affiche par défaut sur mobile, mais que tu peux très facilement adapter pour une utilisation sur tablettes et ordinateurs. Ce type de menu, accessible via l’icône « hamburger » (trois petites barres horizontales), s'ouvre par-dessus le contenu de la page lorsqu'on clique dessus (c'est ce qu'on appelle un menu « hors-cadre » ou « off-canvas »).

Il présente plusieurs avantages pratiques : en plus de fonctionner parfaitement sur les mobiles, il apporte un style moderne et épuré aux versions desktop et tablette. Autre intérêt non négligeable : ce menu off-canvas peut généralement intégrer des modules Joomla directement dans le panneau qui s'ouvre. Tu peux ainsi y ajouter facilement un module de recherche, un formulaire d'identification ou même des informations spécifiques pour tes visiteurs.

Cette option est disponible dans plusieurs templates récents, comme ceux basés sur des frameworks tels que Helix Ultimate ou Astroid, ainsi que dans des templates premium ou gratuits bien conçus. Cela permet donc de conserver une ergonomie homogène et intuitive sur tous les supports, tout en enrichissant ton menu avec des contenus personnalisés selon tes besoins.

[Le_villageois]

Bonjour ,
Astroid le permet aussi.

Bon dimanche ,
B.

[wd_newbie]

Merci pour tout vos retours, ceux-ci concernent surtout des templates hors du core de Joomla.

J'essaie toujours (à raison, je ne sais pas...) de rester sous Cassiopeia

[ManuelVoileux]

Bonjour,
moi aussi j'essaie de rester le plus joomla core possible et j'ai gardé Cassiopeia.
Je pense qu'en jouant sur les limites d'affichage du hamburger dans le fichier css. On doit pouvoir y arriver. Je vais essayer de jouer avec un user.css et la class de nav nav-bar nav-bar-toggler etc
A suivre

[ManuelVoileux]

Bonjour , j'ai réussi , mais le moyen est détestable. Voir le site https://test.voileux.org/
Dans template.min.css, j'ai remplacé chaque appel

@media (width>=576px) {    .navbar-expand-sm {​ ...
@media (width>=768px) {    .navbar-expand-md {​ ...
@media (width>=992px) {    .navbar-expand-lg {​ ...
etc  jusqu'à xxl

par un appel
@media (width>=3000px) {    .navbar-expand-sm {​ ...
etc jusqu'à xxl

Je n'ai pas réussi en recopiant cette ensemble de lignes dans un user.css , ce qui me laisse perplexe pour l'instant.
Je n'ai pas osé modifier les limites de mediaqueries au début du fichier, de peur de perturber l'affichage de modules sur des écrans spécifiques.

Comment j'en suis arrivé là : Je travaille avec Firefox. Afficher les outils de développement web (menu du navigateur/outils/outils de développement web). afficher la simulation d'écrans réduits fenêtre du bas, menu à droite, cliquer sur vue adaptative.
Fenêtre du bas menu de gauche, cliquer sur inspecteur.
Dans la fenêtre de droite cliquer sur header , le 2e div , nav class voir image jointe.
Dans le fenêtre du milieu on voit la ligne concernée et le fichier (template.min.css)
j'ai joint le template.min.css modifié dans un zip

[ManuelVoileux]

Re-Bonjour,
le plus simple que j'ai trouvé est de supprimer toute la section en question dans le fichier /media/templates/site/cassiopeia/css/template.min.css. Les gens propres sur eux feront un template enfant avec un fichier template.min.css modifié.
Donc dans template.min.css supprimer
Depuis
@media (width>=576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .....
jusqu'à
.....offcanvas-body{flex-grow:0;padding:0;display:flex;overflow-y:visible}}

de la dernière section
@media (width>=1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.......offcanvas-body{flex-grow:0;padding:0;display:flex;overflow-y:visible}}


le fichier template.min.css est un cauchemar sans aucune mise en page, aucun saut de ligne. Ce que j'ai fait : c'est l'éditer, sélectionner tout, copier/coller dans un éditeur de texte, chercher la section en question avec un outil recherche, supprimer et retour avec la sélection modifiée dans le fichier du site, que j'avais vidé de tout contenu

[wd_newbie]

Je n'ai pas réussi en recopiant cette ensemble de lignes dans un user.css , ce qui me laisse perplexe pour l'instant.

C'est vrai que j'ai essayé par une surcharge au travers du user.css ... peut-être en créant un fichier dans un template enfant.

Merci pour le tuyau je vais regarder

[ManuelVoileux]

Je n'ai pas réussi en recopiant cette ensemble de lignes dans un user.css , ce qui me laisse perplexe pour l'instant.

C'est vrai que j'ai essayé par une surcharge au travers du user.css ... peut-être en créant un fichier dans un template enfant.
Merci pour le tuyau je vais regarder

Bonjour ,
oui en créant un template enfant , et en créant une surcharge de template.min.css , ça fonctionne