Icones+titres de menu sur grand écran > Icones seules sur petit (css) (Créer un compte)

Accueil › Forums › Thèmes › Icones+titres de menu sur grand écran > Icones seules sur petit (css)
  • Statut : non résolu
3 sujets de 1 à 3 (sur un total de 3)
  • Auteur
    Messages
  • 15 avril 2016 à 10 h 08 min #562004
    Tche
    Participant
    Chevalier WordPress
    182 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 4.5
    – Version de PHP/MySQL : 5.6
    – Thème utilisé : twentyfourteen-child
    – Extensions en place : beaucoup trop: akismet, collapse-o-matic, comment attachment, comment-popularity, jetpack, mycred, user submitted post, post viewed recently, search and filter, subscribe to comments reloaded, supersocializer, TML, transposh, wp-greet, wp-user avatar, yoast SEO
    – Nom de l’hebergeur : OVH
    – Adresse du site : http://tst.allwewish.org/?p=718

    Problème(s) rencontré(s) :
    Je souhaite afficher les titres de mon menu avec des icones différentes mais masquer les titres et n’afficher que les icones sur plus petits écrans.

    Je sais qu’il existe différentes façons d’insérer une icone dans un titre du menu:
    1. :before
    2. :after
    3. content
    4. Background-image
    5. img src
    Pour l’instant, j’ai choisi :before qui me permet de définir des bordures aux icones et d’arrondir leur contour mais qui n’intègre pas l’icone dans le lien (seul les titres sont cliquable)

    Je pense qu’il doit être possible de masquer les titres sur petits écrans à l’aide des @media-screen et de l’attribut display:none…

    Mais j’ignore comment mettre en pratique les deux solutions… et quel est la meilleure si plusieurs sont possibles?

    J’espère que vous pourrez m’aider,
    Un énorme merci d’avance!

    Tche

    17 avril 2016 à 17 h 32 min #1051771
    Tche
    Participant
    Chevalier WordPress
    182 contributions

    Benh alors…
    …entre temps j’ai trouvé un moyen
    1. Dans le panneau d’administration
    >Apparence
    >Menu
    >Sélection du menu à modifier
    >Sélection du titre à modifier
    >Dans « Titre de navigation » ajout du div class de l’image avant le titre ET enrobage du titre dans une autre div
    Ca donne à peu près ceci:

    (Sans donc utiliser le champs prévu pour une classe particulière de bouton)

    2. Dans style.css
    >Définition de la classe icone (.icone-de-titre-de-menu{} )
    >Définition de la classe titre (.titre-de-menu{} )
    >Définition du media-queries pour effacer le titre du menu

    @media screen and (max-width: 1024px) and (max-height: 768px) {
    .titre-de-menu{display:none;}
    }

    Bon alors ceci me permet d’effacer les titres de menus sur petits écrans mais je suis face à un autre problème si je veux utiliser le même hover sur l’image et sur le titre. En d’autres termes, si je veux, par exemple, que l’icône change aussi de couleur quand on passe sur le titre de menu et que le titre de menu change lui aussi de couleur quand on passe sur l’icône.

    Les deux éléments sont en fait contenus dans le lien et celui-ci est bien accessible au passage sur chacun d’entre-eux… mais le passage sur le lien ne modifie pas le fond de l’image… Je continue mes recherches et mes essais (et erreur) mais si qqn a la solution qu’il n’hésite pas à me faire gagner du temps…
    A bientôt,
    Tche

    30 avril 2016 à 11 h 02 min #1051772
    Tche
    Participant
    Chevalier WordPress
    182 contributions

    J’ai essayé le :before sur la class du titre pour l’image et j’ai résolu le problème du hover mais l’image n’est alors plus « cliquable ».

    Est-ce-que quelqu’un aurait une idée et pourrait m’aider?

  • Auteur
    Messages
3 sujets de 1 à 3 (sur un total de 3)
  • Vous devez être connecté pour répondre à ce sujet.