web-dev-qa-db-fra.com

Déclencher le passage de la barre de menu principale au menu hors canevas lorsque le menu principal se briserait en deux lignes?

J'ai un site Web en trois langues, donc le menu principal ne prend pas le même espace pour toutes les langues. Pour cette raison, le menu principal est divisé en deux lignes lorsque les mots du menu principal sont plus longs pour certaines langues, ce qui doit être évité. Une idée comment je peux coder que la barre de menu principale passe à mon menu hors toile, dès qu'elle se diviserait en deux lignes de menu principal, l'une au-dessus de l'autre, peut-être en CSS?

2
Joe

En fait trouvé un moyen via CSS. Tapez simplement le code suivant dans votre champ CSS personnalisé:

@media (max-width:1210 px){
  .sp-megamenu-parent > li > a {
    display:none;
  }
  #offcanvas-toggler {
    display: block!important;
  }
}

Notez que:

  • Cela fait disparaître votre parent de mégamenu et votre bascule hors canevas apparaît à une taille d'écran de 1210 px et moins (ce qui est parfaitement la taille la plus longue de mon menu principal dans la langue avec les mots les plus longs)
  • .sp-megamenu-parent > li > a et #offcanvas-toggler sont les noms css de mon menu principal et de mon menu hors toile respectivement; assurez-vous de taper le vôtre pour que les choses fonctionnent aussi bien pour vous.
2
Joe