Remplacer le menu principal sur petits écrans ?

[RobertG]

Bonjour,

Sur un site que je suis en train de migrer, le menu le plus important est dans la colonne de gauche de Cassiopeia, en fait il est constitué de plusieurs modules de menus. Il y a un menu horizontal en position "menu".
Lorsqu'on passe sur petits écrans, le menu horizontal est bien transformé en hamburger, mais ces modules de gauche passent sous le texte.
Deux questions :
- y a-t-il un moyen pour remplacer le menu principal dans le hamburger par un autre ? Je n'ai pas trouvé d'infos à ce sujet;
- comment faire passer ces modules de gauche avant le texte principal ?

Merci de vos conseils !

[RobertG]

Bonjour,

J'ai beau regarder l'article de woluweb, je ne comprends pas comment modifier par exemple ce code pour forcer l'affichage de la colonne de gauche avant celle du composant :

@media (max-width: 991.98px) {
.site-grid {
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". side-l comp comp side-r ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
}
}​

[woluweb]

Dans l exemple que tu montres sidebar left est bien avant composant.
Suis pas sur pc mais il faudrait verifier s il n y a pas encorebun autre layout pour plus petit que 992px...

[RobertG]

Merci Marc,

Ce que je veux arriver à faire, c'est que sur petit écran, la colonne de gauche passe avant la partie composant/articles en l'occurrence, juste sous l'entête.
Sur grands écrans, on a bien la colonne des modules de menus à gauche mais dès qu'on rétrécit, elle passe en bas de page, ce qui complique l'accès à des liens de menus détaillés (que le menu horizontal ne comporte pas). Il n'y a rien dans la colonne droite.
J'ai essayé de dissocier ". side-l comp comp side-r ." en

". side-l  ."
". comp comp side-r ."

mais ça n'a pas d'effet.

[RobertG]

Bon, j'ai tenté, au pif, et ça fonctionne :

@media (max-width: 991.98px) {
    .site-grid {
        grid-template-areas:
          ". banner banner banner banner ."
          ". top-a top-a top-a top-a ."
          ". top-b top-b top-b top-b ."
          ". side-l side-l side-l side-l ."
          ". comp comp side-r side-r ."
          ". bot-a bot-a bot-a bot-a ."
          ". bot-b bot-b bot-b bot-b ."
    }
}
​

Une partie de la question est résolue.
Mais l'esthétique n'est pas au top : la colonne garde sa taille et sur tablette on va avoir toute une partie vide sur la droite...
La solution d'inversion des menus sur petits écrans (en unifiant les menus de cette colonne en un seul) pour que le menu hamburger s'utilise serait plus esthétique, je pense.

[RobertG]

En testant sur une copie où j'avais tenté d'unifier les menus de cette colonne, je viens de m'apercevoir qu'un autre menu hamburger apparaît.
Si cela se confirme en poursuivant les tests, il faut donc que je convainque le propriétaire du site de la nécessité de cette unification en un seul menu et que je renvoie le reste de la colonne de gauche en bas de page.

[RobertG]

Bonjour,

La solution qui me semble la plus efficace est :

• concaténer les divers menus en un seul dans cette colonne gauche ;
• utiliser le script de Dr Menzel https://gist.github.com/drmenzelit/1...194965e43c97f4 pour gérer le passage au menu hamburger ;
• utiliser la règle citée dans le message n° 5 ci-dessus pour que la colonne gauche s'affiche avant le contenu ;
• positionner ailleurs que dans la colonne de gauche ou masquer sur petits écrans (par règle CSS) les modules autres que menu prenant beaucoup d'espace car sinon, ils seront affichés entre le hamburger et le contenu.

Résultat provisoire en conservant un module d'affichage de liens vers les réseaux sociaux : le hamburger bleu correspond au menu horizontal, le noir au menu vertical, le texte est immédiatement visible. Resterait à gérer des images d'entêtes différentes selon les écrans