2 fois le menu, c’est trop (Créer un compte)

  • WordPress :5.8
  • Statut : non résolu
7 sujets de 1 à 7 (sur un total de 7)
  • Auteur
    Messages
  • #2420701
    laurentsc
    Participant
    Initié WordPress
    41 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version deWordpress : 6.0.2
    • Version de PHP/MySQL : 8/8
    • Thème utilisé : thème enfant et thème principal : Twenty Twenty
    • Extensions en place : Akismet, Classic Editor, Classic Widgets, Contact Form 7, Cookie Notice & Compliance for GDPR/CCPA, Duplicate Page, Duplicator, Embed Plus Plugin for YouTube, Flamingo, FooGallery, GPDR Data Request Form, hCaptcha pour les formulaires et plus, Lightbox avec PhotoSwipe, Really Simple SSL, Remove « Powered by WordPress », UpdraftPlus – Sauvegarde/Restauration,  Yoast SEO
    • Nom de l’hébergeur : Evxonline
    • Adresse du site :  https://pasdpanique.fr/

     

    Problème(s) rencontré(s) : Si l’on visualise le site sur un ordinateur (donc sur un écran large), il y a 2 fois le menu :

    1- le menu pour les ordinateurs (liste horizontale des items)

    2- 3 petits points () pour afficher le menu pour les smartphones

    Or, sur les écrans larges, je souhaite afficher une seule fois le menu (donc masquer les 3 petits points et le mot « menu » juste au-dessous).

    J’ai essayé de trouver la classe CSS concernée avec l’inspecteur (toggle-inner), puis de lui rajouter la règle display:none pour les écrans larges :

    @media (min-width: 1000px)
    .toggle-inner{
    	display:none;
    }

    mais ça ne change rien. Comment faire, SVP ?

    #2420702
    ferman
    Participant
    Maître WordPress
    5359 contributions

    Bonjour,

    Essayez:

    .toggle.nav-toggle.desktop-nav-toggle{
    	display:none;
    }

    Dans ce cas les media-queries sont inutiles.

    #2420708
    laurentsc
    Participant
    Initié WordPress
    41 contributions

    +1 ferman, ça marche.

    J’ai bien trouvé ce code :

    <button class="toggle nav-toggle desktop-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle">
    									<span class="toggle-inner">
    										<span class="toggle-text">Menu</span>
    										<span class="toggle-icon">
    											<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="26" height="7" viewBox="0 0 26 7"><path fill-rule="evenodd" d="M332.5,45 C330.567003,45 329,43.4329966 329,41.5 C329,39.5670034 330.567003,38 332.5,38 C334.432997,38 336,39.5670034 336,41.5 C336,43.4329966 334.432997,45 332.5,45 Z M342,45 C340.067003,45 338.5,43.4329966 338.5,41.5 C338.5,39.5670034 340.067003,38 342,38 C343.932997,38 345.5,39.5670034 345.5,41.5 C345.5,43.4329966 343.932997,45 342,45 Z M351.5,45 C349.567003,45 348,43.4329966 348,41.5 C348,39.5670034 349.567003,38 351.5,38 C353.432997,38 355,39.5670034 355,41.5 C355,43.4329966 353.432997,45 351.5,45 Z" transform="translate(-329 -38)" /></svg>										</span>
    									</span>
    								</button><!-- .nav-toggle -->

    qui semble correspondre à ce que tu me conseilles, mais peux-tu m’expliquer car dans ce code, je vois bien le mot menu, mais pas les ni le menu…

    #2420710
    ferman
    Participant
    Maître WordPress
    5359 contributions

    Les menus  s’appellent « navigation » (abrégé « nav »).  « nav-toggle » signifie à peu près menu basculant (le menu hamburger qui bascule entre icone  et menu), « desktop-nav-toggle » = menu basculant du desktop. Pour le mobile, c’est « mobile-nav-toggle ».

    Donc si on cache « desktop-nav-toggle », on ne touche pas à « mobile-nav-toggle » et il n’y a pas besoin de « media-rule ».

     

    • Cette réponse a été modifiée le il y a 3 jours et 21 heures par ferman.
    #2420715
    laurentsc
    Participant
    Initié WordPress
    41 contributions

    Merci pour la réponse mais je suis un peu largué. Déjà, j’ai vu nul part dans le code les … ni le menu.

    Ensuite, cacher « desktop-nav-toggle » de façon non conditionnelle et que ça cache le menu pour les smartphones si on est sur un écran large et inversement, je ne saisis pas la logique.

    #2420734
    ferman
    Participant
    Maître WordPress
    5359 contributions

    Pour les … c’est en fait une icône et elle est définie dans le HTML que vous avez montré:

    class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="26" height="7" .etc.

    Pour le reste, la classe CSS  « desktop-nav-toggle » n’existe que pour les grands écrans et la classe CSS  « mobile-nav-toggle »  n’existe que pour les petits écrans

    Si vous cachez la première desktop-nav-toggle {display:none}, le menu … disparaîtra seulement  sur les grands écrans.

    Si vous cachez la deuxième (mais ce serait une drôle d’idée), le menu … disparaîtra seulement  sur les petits écrans.

    Si vous omettez de préciser comme ci-dessous:

    #site-header .toggle.nav-toggle{display:none;}

    le menu … disparaîtra quelle que soit la taille de l’écran.

     

    #2421350
    laurentsc
    Participant
    Initié WordPress
    41 contributions

    J’ai oublié de donner suite…

    « Pour le reste, la classe CSS « desktop-nav-toggle » n’existe que pour les grands écrans et la classe CSS « mobile-nav-toggle » n’existe que pour les petits écrans »

    Peux-tu me dire comment s’est possible ?

     

     

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