[RÉGLÉ] cacher le texte du menu

[Cosmic]

bonjour
j'ai une petite question un peu con parce que je pensais être sur la bonne voie mais ça ne marche pas

https://smilecollector.photos/fr/cosmic-tribune-fr

sur cette page par exemple, j'essaie de retirer le texte des menus quand l'écran est plus petit...
quand l'écran est plus petit, le menu se met sur 2 lignes... du coup je voulais virer le texte pour que ça reste sur une seule ligne (c'est très moche avec la langue sur le côté)

et donc transformer [@] 'ze' collection en [@]...

j'ai trouvé pour retirer l'icône span.nav-title > i {display: none;} mais pas pour le texte - je cherche son sélecteur succès

j'ai essayé plein de combinaison avec #text, des >, des +, des espaces...

quelqu'un aurait une idée?

(template: Astroid)

[chabi01]

Bonjour,
Ton sélecteur pour tes éléments de menu est : .astroid-nav .nav-item-parent .nav-title
Ajoute à ton css un mediaquerie du genre (à affiner) :

@media screen and (max-width: 640px) { .astroid-nav .nav-item-parent .nav-title { display:none; clear:both; } }

Voir jouer avec la taille de la police.
Par contre, le mieux serait de jouer plutôt avec les règles de positionnement plutôt que de masquer complètement le texte, ou encore d'avoir un menu "mobile, un menu "tablette" (écran moins large que bureau) et écran large.

Tu peux également jouer avec 3 modules couplé à Advanced module manager qui te permet de donner des règles additionnelles d'affichages / masquage.
Du coup, tu as tes 3 modules pour tes 3 tailles.


Cordialement,

[Cosmic]

Merci

Étrangement, Advanced module manager ne fonctionne pas sur mon site - je ne sais pas qu'est-ce qui entre en conflit mais j'ai réussi à faire sans jusque-là :/

par contre, ton code efface tout alors que je veux garder l'icône. c'est pour ça que je dis que je veux effacer le texte - c'est que j'essaie d'expliquer avec mon

et donc transformer [@] 'ze' collection en [@]

j'espérais que la représentation de l'appareil photo était assez claire - ben non


j'avais réussi à un résultat similaire au tien mais ça veut dire qu'il faudrait doubler les deux plus gros menus et je t'avoue qu'il y a pas mal de paramètres (y a du FlexiContent qui tourne sur le site)

[chabi01]

Bonjour,
Impossible à ma connaissance de cibler uniquement le texte si il n'a pas une classe particulière...
Il va falloir jouer dans le menu même en plus du css ici... sauf si quelqu'un a une autre solution

Cordialement,

[Cosmic]

merci pour ton aide

[Cosmic]

chabi01 et on est d'accord qu'on ne peut pas dupliquer le menu en entier? hein... ben non ce serait trop facile

ah mais par contre, on peut peut-être ajouter du texte à l'icône (via un :after) si elle est seule quand l'écran est plus grand... je vais creuser par là je crois

[Cosmic]

bon alors, juste pour info

je me suis servi du badge du menu astroid pour le texte et utiliser l'option "icon only"

en utilisant ce css pour l'afficher comme du texte normal

span.menu-item-badge {
vertical-align: -webkit-baseline-middle;
text-transform: none;
font-size: initial;
}

et du coup c'est masquable quand la taille de l'écran se réduit