Desactiver un lien de menu sur portables

[surfeur1912]

Bonjour à tous
Je souhaiterais désactiver un lien de mon menu principal pour qu'il n'apparaisse pas sur les téléphones portables (mais qu'il reste accessible sur ordi). En effet la page vers qui il pointe s'affiche mal sur les portables et pointe donc vers une page blanche (pbm de mise en page).
Je ne trouve pas la solution. Quelqu'un aurait une idée ?
Merci d'avance

[jfque]

En général, les menus ne s'affichent pas de la même manière sur les ordinateurs et sur les appareils mobiles : sur les ordi, le menu est visible, sur les mobiles, il faut cliquer sur l'icône "hamburger" pour le faire apparaître.
Suivant le système de template que vous utilisez, cela peut être le même menu dont les différences d'affichage sont gérées par le template car il s'agit de "positions" de modules différentes.
Mais rien ne vous empêche de créer 2 menus différents : un pour les ordis et un pour les mobiles, dans lequel vous n'incluez pas le lien en question. Pour chaque menu, vous associez un module et chaque module est placé dans la position correspondante prévue dans le template.
Pour éviter le contenu dupliqué (2 URLs différentes pour une même page), utilisez les alias de liens de menu pour les items du menu "mobile".

[RobertG]

Bonjour,

Ne serait-il pas possible de jouer sur la classe CSS du lien, en lui en affectant une qui ne s'appliquerait, avec "@media", qu'aux petits écrans et qui serait une instruction "display:none;" ?

[surfeur1912]

En général, les menus ne s'affichent pas de la même manière sur les ordinateurs et sur les appareils mobiles : sur les ordi, le menu est visible, sur les mobiles, il faut cliquer sur l'icône "hamburger" pour le faire apparaître.
Suivant le système de template que vous utilisez, cela peut être le même menu dont les différences d'affichage sont gérées par le template car il s'agit de "positions" de modules différentes.
Mais rien ne vous empêche de créer 2 menus différents : un pour les ordis et un pour les mobiles, dans lequel vous n'incluez pas le lien en question. Pour chaque menu, vous associez un module et chaque module est placé dans la position correspondante prévue dans le template.
Pour éviter le contenu dupliqué (2 URLs différentes pour une même page), utilisez les alias de liens de menu pour les items du menu "mobile".

Merci pour ces précisions.
Effectivement en créant 2 menus différents, je vais voir si j'y arrive..
Cordialement

[surfeur1912]

Bonjour,

Ne serait-il pas possible de jouer sur la classe CSS du lien, en lui en affectant une qui ne s'appliquerait, avec "@media", qu'aux petits écrans et qui serait une instruction "display:none;" ?

Merci pour ta réponse ..
Mes connaissances en CSS étant limitées, j'ai peur que ce soit un peu compliqué de jouer avec la classe CSS ..
Mais merci encore pour ton aide
Cordialement

[RobertG]

Je ne suis pas des plus à l'aise avec le CSS, moi non plus.
Dans ton lien de menu, tu définis une classe (dans mon exemple, "cachemin"), puis tu définis la classe dans le code personnalisé du template (user.css pour Cassiopeia)

@media (max-width: 991.98px) {
.cachemin {
display:none;
}
}​

Lorsque tu sera sur un écran de moins de 992 pixels de large, ton lien de menu n'apparaîtra pas.

[Helloo]

J'aurais aussi fais comme RobertG

[RobertG]

Seule anomalie : je n'ai pas trouvé comment libérer totalement la ligne. Sur le smartphone, j'ai un espace plus important que souhaité, même en mettant line-height à 0. Peut-être faut-il aussi prendre en compte "li" dans cette instruction ?

[Helloo]

Seule anomalie : je n'ai pas trouvé comment libérer totalement la ligne. Sur le smartphone, j'ai un espace plus important que souhaité, même en mettant line-height à 0. Peut-être faut-il aussi prendre en compte "li" dans cette instruction ?

Oui, je viens de tester, tu as raison il y a un espace plus grand.

Si je mets le code suivant dans le fichier user.css (type de liens vide) c'est bon:

​@media (max-width: 991.98px) {
​.metismenu-item.item-102.level-1 {
  display: none;
}​
}​​

[ManuelVoileux]

Bonjour , pour jouer sur les classes CSS pour afficher ou pas des modules , j'utilise les classes bootstrap , défiler la page jusqu'au paragraphe "hiding elements"
https://getbootstrap.com/docs/5.3/utilities/display/

Hidden only on xs

.d-none .d-sm-block

Voici un lien de menu qui ne s'affiche pas sur smartphone



et voici un module qui ne s'affiche pas sur smartphone

[surfeur1912]

Je ne suis pas des plus à l'aise avec le CSS, moi non plus.
Dans ton lien de menu, tu définis une classe (dans mon exemple, "cachemin"), puis tu définis la classe dans le code personnalisé du template (user.css pour Cassiopeia)

@media (max-width: 991.98px) {
.cachemin {
display:none;
}
}​

Lorsque tu sera sur un écran de moins de 992 pixels de large, ton lien de menu n'apparaîtra pas.

OK, merci beaucoup pour ton aide .. Je vais essayer ca
Bonne soirée