Salmigondis

méli-mélo

crystal clear app ktalkd Menus à plusieurs niveaux sur un mobile avec le template elastica

 

Le template elastica est un superbe template pour joomla permettant d'adapter automatiquement son affichage selon la résolution de l'écran du périphérique. Jusqu'à la résolution de 734 px en largeur, le menu utilisé est le mega menu. En dessous , largeur de 733 px est moins , le template modifie le menu pour en faire un compatible avec les écrans des portables, smartphones. Le petit soucis se situe au niveau des menus ayant plusieurs niveaux, seul le premier niveau s'affiche, rendant la navigation très difficile, vu le manque de menus. Pour corriger cela, il faut apporter quelques petites modifications au niveau des feuilles de styles du template.

 Modifier via la gestion des templates, la feuille de style, layout-mobile.css, comme suit:

#ja-megamenu li.rjd-active .childcontent {
  display: block !important;
  left: 0 !important;
  margin: 0 !important;
  position: absolute;
 /* top: 40px !important; */    <----     effacer  la ligne ou la commenter comme ici
  width: 100% !important;
}

#ja-menu-button {
  border-right: 1px solid #222;
  display: block;
  float: left;
  font-size: 1em;
  font-weight: bold;
  padding: 1em;
  text-transform: uppercase;
  z-index: 3;   <---  Remplacer 4 par 3
} 

 

  Et sauvegarder. Les différents niveaux de menus s'affichent bien sur un smarphone.

 Merci au forum: http://www.joomla-support.fr/forum/91-Ja_Elastica

Log in to comment