Cette page peut contenir des liens d'affiliation. Si vous achetez par l'intermédiaire de ces liens, je peux percevoir une commission sans frais supplémentaires pour vous.
Si vous utilisez ElementorKit pour votre site Web et que vous rencontrez un problème où la superposition du menu mobile empêche les utilisateurs de fermer le menu, vous n'êtes pas seul. Il s'agit d'un bug connu où le menu reste visible, même si les utilisateurs peuvent faire défiler la page. Le bouton de fermeture « X » ne répond plus, ce qui entraîne une expérience utilisateur frustrante. Heureusement, il existe une solution simple à ce problème.
Comprendre le problème
Le problème vient du conflit valeurs d'index z dans la superposition du menu mobile et dans le conteneur du menu. La superposition recouvre le bouton de fermeture, ce qui rend impossible l'interaction des utilisateurs avec celui-ci. Par conséquent, le menu reste ouvert même si les utilisateurs essaient de le fermer ou de cliquer en dehors de la zone du menu.
Solution étape par étape
Voici comment vous pouvez résoudre le problème en ajustant le valeurs d'index z dans Elementor:
1. Ouvrir l'en-tête dans Elementor
- Navigate to your WordPress dashboard.
- Aller à Modèles > Modèles enregistrés et localisez votre en-tête.
- Cliquez Modifier avec Elementor pour ouvrir le modèle d'en-tête dans le Elementor éditeur.
2. Ajuster l'index z de la superposition
- Sélectionnez le récipient qui contient la superposition de votre menu mobile.
- Sous le Avancé onglet, faites défiler jusqu'à l' CSS personnalisé section.
- Ajoutez le code CSS suivant :
z-index : auto !important ;
Cela garantit que l'index z de la superposition ne remplace pas le bouton de fermeture ou n'interfère pas avec les interactions de l'utilisateur.
3. Définir un z-index élevé pour le menu
- Maintenant, sélectionnez le conteneur de menu mobile (l'élément contenant les éléments de menu et le bouton de fermeture).
- Sous le Avancé onglet, localisez le indice z champ.
- Réglez l'index z sur 5000 spécifiquement pour la vue mobile. Vous pouvez le faire en passant à l' mode réactif dans Elementor et en sélectionnant le vue mobile.
- Vue du bureau : Laissez l’index z tel quel.
- Vue mobile : Définir l'index z sur 5000.
4. Enregistrer et tester
- Enregistrez vos modifications en cliquant sur Mise à jour.
- Testez votre menu mobile pour vous assurer que la superposition ne bloque plus le bouton de fermeture et que le menu se ferme comme prévu lorsque vous cliquez à l'extérieur ou utilisez le bouton « X ».
Pourquoi cela fonctionne
L'index z par défaut de la superposition est souvent trop élevé, ce qui l'amène à se trouver au-dessus d'éléments interactifs comme le bouton de fermeture. En définissant l'index z de la superposition sur auto et en augmentant l'index z du menu à 5000, vous donnez la priorité au menu et à ses éléments interactifs par rapport à la superposition.
Réflexions finales
Ce conflit d'index z dans ElementorKit est un bug courant, mais avec la solution ci-dessus, vous pouvez rapidement résoudre le problème et restaurer le comportement attendu de votre menu mobile. Garder votre menu mobile fonctionnel est essentiel pour l'expérience utilisateur, d'autant plus que les utilisateurs mobiles représentent une part importante du trafic Web.
Si le problème persiste malgré ces modifications, pensez à contacter l'équipe d'assistance d'ElementorKit pour obtenir une assistance supplémentaire.
