[Résolu] Comment centrer ma loupe de recherche en version mobile ? (Créer un compte)

  • WordPress :5.7
  • Statut : résolu
3 sujets de 1 à 3 (sur un total de 3)
  • Auteur
    Messages
  • #2376008
    Lili
    Participant
    Initié WordPress
    8 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : dernière version (je sais pas où trouver cette info)
    • Thème utilisé : Lucienne
    • Extensions en place : Responsive Menu, Ivoiry Search (extensions concernées par mon pb)
    • Nom de l’hébergeur : Ovh
    • Adresse du site :

    Problème(s) rencontré(s) : j’ai voulu intégré la recherche dans mon menu. Ok, ca a bien marché, sauf qu’en version mobile, la loupe est trop à gauche. J’aimerais qu’elle soit centrée.

    J’ai essayé d’ajouter cette ligne en CSS additionnel que ce soit dans Ivoiry ou dans menu / apparences / personnaliser. La modification est prise en compte en version ordinateur mais pas version mobile. Auriez-vous une idée ?

     

    Voici la ligne que j’avais ajouté : . astm-search-menu.is-menu.is-dropdown.menu-item {margin-left:40px}

    • Ce sujet a été modifié le il y a 2 semaines et 2 jours par PhiLyon. Raison: Suppression url incompatible avec les règles du forum
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2376012
    pasglop
    Participant
    Chevalier WordPress
    255 contributions

    Bonjour,

     

    Vois du coté de @media en css, par exemple:

    
    
    
    @media only screen and (max-width: 760px) {
    ...
    }

    #2376020
    Lili
    Participant
    Initié WordPress
    8 contributions

    Bonjour,

    Un ami m’a aidé et j’ai même pu afficher la barre de recherche directement. J’ai 2 codes : 1 pour la version mobile et 1 pour la version ordi :

    @media
    screen and (max-width: 800px) {
    #responsive-menu-container .astm-search-menu > a { display: none; }
    #responsive-menu-container .astm-search-menu > form { position:relative; margin-left: 45px; min-width: 190px; display: block !important; }
    #responsive-menu-container .astm-search-menu > form input { padding: 0 12px; }
    }

    #primary-menu .astm-search-menu > a { display: none; }
    #primary-menu .astm-search-menu > form { position:relative; display: block !important; }

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