menu burger sur mobile et tablette non visible avec elementor (Créer un compte)

  • WordPress :6.1
  • Statut : non résolu
  • Ce sujet contient 7 réponses, 5 participants et a été mis à jour pour la dernière fois par helenam, le il y a 4 mois.
8 sujets de 1 à 8 (sur un total de 8)
  • Auteur
    Messages
  • #2436726
    Mirsa
    Participant
    Initié WordPress
    1 contributions

    SVP

    <span>J’ai crée un en tete avec Elementor. Il fonctionne bien en mode ordinateur de bureau et ordinateur portable, mais lorsque je l’essaie sur mobile, le menu ne s’affiche pas. Il semble être là, car quand je clique quelque part sur le côté droit du menu il ouvre le menu sur le côté gauche, mais l’icône du menu Hamburger n’est pas visible.</span>

    <span>Des solutions à ce problème ? Merci!</span>

    <span>J’utilise Elementor et WordPress version 6.0.1</span>

    #2437045
    Domov
    Participant
    Padawan WordPress
    86 contributions

    Bonsoir, pouvez-vous nous fournir l’url de votre site web ?

    #2469022
    gers32
    Participant
    Initié WordPress
    9 contributions

    Bonjour, je me permets de relancer la discussion. Mirsa n’ayant pas répondu à votre demande d’URL, dois-je en déduire qu’elle/il a résolu son problème ? Si tel est le cas, il serait intéressant de connaître sa solution.

    Dans le cas inverse, voici l’URL de mon site, qui souffre du même problème : l’icône « hamburger » du menu n’apparaît pas en mode tablette/mobile ; elle est remplacée par un tout petit carré gris, que personne ne voit… Elle s’affiche bien depuis l’éditeur Elementor (free), lorsque je réduis la largeur de la page.

    https://bunn.design/

    J’ai chargé des icônes de remplacement dans la rubrique des médias et suivi les instructions dans la vidéo Change Mobile Menu Icons in Elementor Pro. N’ayant pas la version pro, j’ai collé – en vain – le CSS suivant dans  : Apparence > Personnaliser > CSS additionnel et vidé tous les caches (LightSpeed Cache et Chrome sur mobile) :

    .elementor-menu-toggle i:before {
    content: '';
    display: block;
    background: url(http://bunn.design/wp-content/uploads/2024/03/bars-solid_orange_sanitized.svg);
    width: 40px;
    height: 40px;
    background-size: cover;
    }

    .elementor-menu-toggle.elementor-active i:before {
    content: '';
    display: block;
    background: url(http://bunn.design/wp-content/uploads/2024/03/circle-xmark-solid_orange_sanitized.svg);
    width: 40px;
    height: 40px;
    background-size: cover;
    }

    • Cette réponse a été modifiée le il y a 4 mois et 2 semaines par gers32. Raison: Supprimé les balise HTML dans le texte
    #2469488
    gers32
    Participant
    Initié WordPress
    9 contributions

    Bonjour,

    Quelqu’un a-t-il une solution potentielle à me suggérer ? Visiblement, la solution que j’ai tentée ne semble fonctionner qu’avec la version Pro d’Elementor, avec le CSS injecté directement dans l’en-tête de page.

    Je suis embêté, car je n’ose pas communiquer mon site Web, tant qu’il n’est pas utilisable sur mobile.

    Christophe

    #2469750
    gers32
    Participant
    Initié WordPress
    9 contributions

    J’ai résolu mon problème (en grande partie) : ne connaissant rien à la programmation Web, je n’avais pas osé regarder sous le capot. Je me suis finalement décidé à enfoncer la touche F12 de mon clavier… et il s’avère que le nom de la classe – que je croyais immuable dans Elementor – n’est pas le même que dans l’exemple de la vidéo. Je l’ai donc remplacé par .site-navigation-toggle-holder et ça fonctionne.

    Seul bémol : l’icône représentant une image introuvable s’affiche toujours à la place de la croix, lorsque le menu est déroulé, mais elle est partiellement cachée par ma propre grosse icône.

    #2469754
    gers32
    Participant
    Initié WordPress
    9 contributions

    INFORMATION DE DERNIERE MINUTE

    Il y a de cela plusieurs semaines, j’avais tenté le bout de code suivant. Il n’avait pas fonctionné… tout simplement parce qu’il y avait des espaces en trop dans l’article ! Ceci répare donc le problème d’affichage à la fois de l’icône menu et de l’icône croix (source : <span style= »font-weight: 400; »>Burger menu on mobile devices not visible (Elementor, Hello Theme)</span>) :

    /* MOBILE NAV HAMBURGER FIX */
    .site-navigation-toggle i:before {
    content: “\f0c9” !important;
    font-family: “Font Awesome 5 Free”;
    font-weight: 900;
    font-size: 22px;
    font-style: normal;
    }
    .site-navigation-toggle-holder.show.elementor-active.site-navigation-toggle i:before {
    content: “\f00d” !important;
    }

    #2469757
    ferman
    Participant
    Maître WordPress
    7057 contributions

    ne connaissant rien à la programmation Web,

    Ça c’était avant 🙂 ; vous vous en êtes bien sorti .

    #2469844
    helenam
    Participant
    Initié WordPress
    1 contributions

    Bonjour, j’ai un problème un peu similaire et je me demande si le problème ne vient pas de la version PHP. Je suis en PHP8.2.

    J’ai un problème d’affichage du menu wordpress. J’utilise elementor pro, thème astra pro aussi. Les extensions sont à jour.

    L’onglet qui contient un sous-menu, a une double flèche, des fois il y en a 4 qui s’affichent pour redescendre à 2. ça c’est le 1er problème. que ce soit sur pc, mobile, tablette. Le normal est seulement 1 flèche. Quel que soit le navigateur. Mes caches sont purgés, mes CSS régénérés.

    Ensuite, sur mobile (et tablette j’imagine), j’ai un soucis sur la home page, le menu hamburger ne se déroule pas, quelque soit le navigateur. On a beau cliquer dessus, ça ne l’ouvre pas. Il faut se trouver dans une autre page du site, accessible en cliquant sur un des pictos de la home page en descendant. Là, le menu hamburger se déroule. Mais contient encore quelques bugs. Le sous-menu se referme tout de suite, il ne le déroule pas normalement et on ne peut pas accéder car cela se referme.

    Et on ne peut plus refermer le menu hamburger, la croix semblant inactive. Comme en home pour ouvrir le menu. Là il ne se ferme plus.

    Quelqu’un pourrait m’aider à résoudre ces bugs sans retrograder de version PHP ? Cela ne vient peut être pas de ça, mais c’est possible que oui, car j’ai fait un upgrade il y a quelques semaines et il me semble que ce problème est apparu depuis. Ce menu wordpress est géré aussi via elementor pour les détails. Et toutes les extensions ont fait récemment plein de mises à jour…J’ai pensé à un problème de cache mais non, car j’ai désactivé litespeed et le problème n’a pas disparu. C’est très embettant que les utilisateurs mobile (et tablettes) ne puisse plus naviguer sur mon site.

     

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