Liens de menu invisibles sur mobile : comment les rétablir sur WordPress

Si vos liens de menu sont invisibles sur mobile, vérifiez d’abord que le menu est bien configuré et que son bouton d’ouverture fonctionne. Le problème peut aussi venir du thème, d’une extension, du cache ou du code qui adapte l’affichage aux petits écrans. Testez chaque piste séparément pour identifier la cause avant de modifier votre site.

Identifier le problème sur mobile

Commencez par observer précisément ce qui manque. Le menu entier est-il absent, ou seulement certains liens ? Le bouton de menu, souvent représenté par trois lignes horizontales, apparaît-il et ouvre-t-il la navigation lorsque vous le touchez ?

Vérifiez aussi les sous-menus. Selon le thème, ils peuvent nécessiter un appui sur une flèche ou un bouton distinct du lien principal. Un lien visible mais qui mène vers une mauvaise page relève plutôt d’un problème de navigation WordPress.

Pour cerner le problème :

• testez plusieurs tailles d’écran, en portrait et en paysage ;
• essayez différents navigateurs mobiles, comme Chrome, Firefox, Safari ou Edge, selon les appareils disponibles ;
• comparez l’affichage de plusieurs pages du site ;
• notez si le défaut concerne tous les liens, un sous-menu ou un seul élément.

Si vous ne disposez pas de plusieurs téléphones, le mode développeur de Chrome permet de simuler différentes tailles d’écran. BrowserStack peut également aider à comparer les affichages. Une simulation complète les essais sur appareil réel, sans les remplacer : certains comportements tactiles ou propres au navigateur peuvent être différents.

Vérifier les réglages du menu WordPress

Avec un thème classique, ouvrez Apparence > Menus dans le tableau de bord. Sélectionnez le menu concerné et contrôlez les éléments suivants :

1. Les liens attendus figurent bien dans le menu et leur ordre est correct.
2. Les sous-éléments sont placés sous le bon élément parent.
3. Le menu est affecté à l’emplacement prévu par le thème, notamment à l’emplacement mobile s’il en propose un.
4. Les pages et adresses des liens sont correctes et ne renvoient pas vers des pages supprimées.

Si votre site utilise un thème à blocs, le menu peut être géré dans Apparence > Éditeur, à l’aide d’un bloc Navigation. Vérifiez alors le contenu de ce bloc dans l’en-tête utilisé par les pages concernées.

Consultez également les réglages du thème ou de votre constructeur de pages : certains proposent un menu mobile distinct ou des options pour les menus déroulants. Après toute modification, enregistrez et testez à nouveau sur téléphone.

Examiner le thème et les extensions

Un thème peut afficher correctement la navigation sur ordinateur, mais mal l’adapter aux petits écrans. Vérifiez d’abord ses options de menu mobile et recherchez une mise à jour disponible. Avant toute mise à jour ou modification importante, effectuez une sauvegarde du site.

Si le problème persiste, testez un autre thème adapté aux mobiles, de préférence sur une copie de test. Changer de thème sur le site public peut modifier l’apparence et les emplacements des menus. Vérifiez donc l’affectation du menu avant de conclure que le thème initial est en cause.

Une extension peut aussi créer un conflit, notamment si elle modifie l’en-tête, la navigation ou le chargement des scripts. Sur une copie de test si possible :

1. Désactivez une extension à la fois.
2. Rechargez le site sur mobile et vérifiez le menu.
3. Réactivez l’extension si le problème persiste, puis passez à la suivante.
4. Si la désactivation rétablit le menu, examinez ses réglages ou demandez de l’aide à son développeur avant de la remplacer.

Évitez de désactiver toutes les extensions simultanément sur un site en production : certaines assurent des fonctions nécessaires à son fonctionnement. Pour un problème plus large lié au thème, consultez aussi les pistes de personnalisation de thème WordPress.

Contrôler le cache et le code d’affichage

Si vous avez corrigé les réglages mais que le menu reste inchangé, videz le cache du navigateur et, si votre site en utilise un, celui de l’extension de cache ou de l’hébergement. Rechargez ensuite la page sur mobile. Un ancien fichier CSS ou JavaScript peut maintenir un affichage dépassé.

Si le problème persiste, les outils de développement du navigateur peuvent aider à examiner le menu :

• CSS et media queries : vérifiez si une règle appliquée aux petits écrans masque les liens, leur donne une taille insuffisante ou les place hors de la zone visible.
• HTML : recherchez des balises manquantes, mal fermées ou mal imbriquées dans le code personnalisé de l’en-tête.
• JavaScript : vérifiez si une erreur dans la console empêche l’ouverture du menu ou de ses sous-menus.

Le bouton à trois lignes permet de conserver une navigation compacte, mais il doit ouvrir un menu dont les liens restent visibles et utilisables. Certains thèmes utilisent JavaScript ou jQuery pour gérer cette ouverture : une erreur de script ou un conflit peut donc bloquer le fonctionnement du bouton.

Si vous ne maîtrisez pas le code, évitez de modifier directement les fichiers du thème en production. Un dépannage WordPress permet de rechercher la cause sans multiplier les changements au hasard.

Retester la navigation après correction

Une fois la modification effectuée, videz les caches concernés puis reprenez vos essais sur les appareils et navigateurs où le problème apparaissait. Ouvrez le menu, dépliez chaque sous-menu et touchez les liens pour vérifier à la fois leur visibilité et leur destination.

Contrôlez également les autres éléments de l’en-tête et les pages principales : un réglage ou un changement d’extension peut affecter plusieurs parties du site. Si certains liens restent absents, revenez à la dernière modification et poursuivez les tests, une piste à la fois.

Questions fréquentes

Article rédigé avec l’aide d’une IA à partir des sources citées et de notre pratique de la maintenance WordPress. Notre méthode éditoriale.