6 à 8 minutes Niveau : Débutant / Intermédiaire
Objectif de cette astuce
Savoir adapter son menu de navigation pour les appareils mobiles — qu’il s’agisse de vérifier la gestion native du thème, d’installer un plugin dédié, ou de configurer le menu en superposition dans l’Éditeur de site FSE.
Pourquoi c’est indispensable
Sur mobile, un menu horizontal classique devient rapidement illisible : les liens sont trop petits, trop serrés, impossibles à tapper précisément. Selon les statistiques, plus de 60 % du trafic web se fait aujourd’hui sur mobile. Une navigation mal adaptée entraîne des abandons immédiats — et Google en tient compte dans son évaluation de l’expérience utilisateur (Core Web Vitals).
La solution standard est le menu hamburger : un bouton ☰ qui masque le menu par défaut et l’affiche en superposition au tap. C’est le comportement attendu par les visiteurs mobiles.
Méthode 1 — Votre thème classique gère déjà le mobile
La majorité des thèmes modernes (Astra, GeneratePress, OceanWP, Neve…) intègrent nativement un menu hamburger responsive. Avant d’installer quoi que ce soit, vérifier deux points.
1 — Vérifier que le menu est assigné au bon emplacement
Dans Apparence → Menus → Gérer les emplacements, s’assurer que le menu souhaité est bien assigné à l’emplacement “Menu principal” (ou son équivalent selon le thème). Un menu non assigné n’apparaît nulle part — ni sur desktop, ni sur mobile.
Étape 2 — Tester sur mobile
Ouvrir le site dans un onglet de navigation privée sur son téléphone, ou utiliser les outils de développement du navigateur (F12 → icône mobile) pour simuler un écran de smartphone. Si le menu se transforme en hamburger et fonctionne au tap, il n’y a rien de plus à faire.
Conseil : tester aussi les sous-menus sur mobile — ils doivent s’ouvrir au tap et non au survol.
Méthode 2 — Thème classique sans gestion mobile native → Plugin Responsive Menu
Si le thème ne gère pas le mobile nativement, la solution la plus simple est un plugin. Dans cette astuce, nous utilisons : Responsive Menu – Create Mobile-Friendly Menu — gratuit, 80 000+ installations actives, aucun code requis. Mais vous pouvez en tester d’autres comme par exemple WP Responsive Menu. Vérifiez toujours, le nombre d’installations actives, les dernières mises à jour, les notes moyennes des utilisateurs et la compatibilité avec votre version de WordPress.
Installation : Extensions → Ajouter → rechercher “Responsive Menu” → Installer → Activer.
Une fois activé, aller dans Responsive Menu → Créer un nouveau menu et configurer les points essentiels :
| Réglages | Ce qu’il faut faire |
|---|---|
| Nom du menu | Choisir le menu WordPress existant à utiliser |
| Masquer le menu du thème | Saisir le sélecteur CSS du menu desktop pour éviter d’en afficher deux simultanément |
| Visibilité | Choisir sur quels appareils afficher le menu (mobile uniquement recommandé) |
| Icône hamburger | Choisir l’animation d’ouverture parmi les modèles disponibles |
Point critique : le champ “Masquer le menu du thème” est indispensable. Si le thème a déjà un menu, ne pas le masquer provoque l’affichage de deux menus superposés sur mobile. Pour trouver le sélecteur CSS du menu existant, inspecter l’élément dans les outils de développement du navigateur.
Méthode 3 — FSE : réglages natifs du bloc Navigation
Avec un thème basé sur des blocs, le bloc Navigation intègre nativement la gestion du menu mobile, sans plugin. Tout se configure dans l’Éditeur de site.
Mais selon le thème bloc utilisé, les réglages peuvent être différents.
Pour les thèmes FSE qui n’ont pas ces options nativement, le plugin Groundworx Navigation est une solution spécialement conçue pour les thèmes blocs (compatible Twenty Twenty-Four et Twenty Twenty-Five).
Aller dans : Apparence → Éditeur → Navigation, sélectionner le menu, puis dans la sidebar droite → onglet Bloc
ou
Aller dans : Apparence → Éditeur → Compositions → En-tête
Dans notre cas, avec le thème Twenty Twenty-Five, l’accès se fait les compositions d’en-tête, 3 versions sont possible
Les réglages à configurer :
| Option | Valeur recommandée |
|---|---|
| Menu en superposition | Mobile — s’active uniquement sur les petits écrans |
| Afficher l’icône du bouton | Activé — affiche le ☰ hamburger |
| Icône | Choisir entre 2 ou 3 lignes horizontales |
| Texte alternatif | Désactiver l’affichage du mot “Menu” si l’icône suffit |
Le style de l’overlay (couleur de fond, typographie) se personnalise dans l’onglet Styles du même bloc.
En FSE il est aussi possible de concevoir un template d’overlay personnalisé —
Apparence → Éditeur → Modèles → Overlay de navigation mobile— pour aller au-delà du menu hamburger standard.
Récapitulatif — Quelle méthode selon votre situation ?
| Situation | Méthode | Effort |
|---|---|---|
| Thème moderne (Astra, GeneratePress…) | Vérifier l’emplacement du menu + tester | Minimal |
| Thème classique sans menu mobile | Plugin Responsive Menu | Facile |
| Thème basé sur des blocs (FSE) | Réglages natifs du bloc Navigation | Minimal |
Ce qu’il faut retenir
La navigation mobile n’est plus une option — c’est un prérequis. La bonne nouvelle est que WordPress et ses thèmes modernes gèrent souvent cela nativement : la première étape est toujours de tester avant d’installer quoi que ce soit. Si le thème le gère, aucun plugin n’est nécessaire. Si ce n’est pas le cas, Responsive Menu résout le problème en quelques minutes. En FSE, le bloc Navigation offre une solution intégrée et suffisante pour la grande majorité des cas.