Définir ce qui manque sur le téléphone
Le menu est visible sur ordinateur, mais aucun lien ni bouton identifiable n’apparaît sur téléphone. Ce symptôme se distingue d’un bouton présent qui ne répond pas : dans ce second cas, le déclencheur existe et il faut examiner son ouverture. Ici, le premier objectif consiste à retrouver le composant qui devrait être visible à petite largeur.
Un menu mobile peut se présenter sous forme d’icône à plusieurs lignes ou d’un bouton portant le mot Menu. L’absence de l’icône habituelle ne prouve donc pas l’absence de navigation. Cherchez aussi un libellé discret, un bouton dans un autre groupe d’en-tête ou un élément qui se confond avec son fond.
Notez une adresse publique concernée, la largeur approximative et l’orientation du téléphone. Vérifiez si toutes les pages sont touchées, si le problème commence après le défilement et si une visite déconnectée le reproduit. Une page sans en-tête volontaire ne constitue pas le même cas qu’une navigation disparue sur tout le site.
Conservez une capture et les réglages actuels avant de modifier l’en-tête. Les pages peuvent partager sa structure et son menu. Vous chercherez d’abord une correction native, puis une règle de présentation confirmée. Une extension devient pertinente seulement si le système existant ne fournit pas le comportement mobile nécessaire.
Relever le même en-tête aux deux largeurs
Commencez par une page où vous attendez la navigation et ouvrez son adresse publique en session anonyme. Prenez une largeur où le menu fonctionne, puis une où il disparaît. Dans la vue adaptative du navigateur, notez la largeur en pixels CSS et gardez le même zoom. Si la première fenêtre est ouverte sur l’accueil et la seconde sur un article, les modèles peuvent être différents. Faites d’abord les deux relevés sur la même URL, puis comparez les modèles si le problème se limite à certaines pages. Réduisez ensuite la largeur par étapes pour repérer le seuil. Il dépend du thème et de ses règles. La vue adaptative sert à isoler ce seuil avant une confirmation sur un téléphone réel.
À chaque largeur, notez trois choses. Relevez les liens visibles avant toute action, la présence d’un bouton dans l’en-tête et ce que le bouton donne après activation. Sur ordinateur, les liens peuvent être visibles sans bouton. Sur mobile, un panneau fermé peut masquer les liens jusqu’à l’ouverture. Une absence d’icône n’est gênante que si les liens attendus sont eux aussi inaccessibles, ou si le site devrait présenter une navigation repliée. Si le bouton est visible mais ne réagit pas, conservez ce constat. Le problème relève alors de l’ouverture du panneau.
Utilisez l’inspecteur pour distinguer un bouton qui n’a pas été rendu d’un bouton présent mais masqué. Ouvrez **Éléments** et sélectionnez l’en-tête qui apparaît dans la page. Recherchez le bouton dans cette zone. Certains thèmes contiennent deux en-têtes ou deux navigations, dont une seule est destinée à la largeur testée. Vérifiez l’élément à l’intérieur de l’en-tête concerné. Si vous cherchez simplement le mot « Menu » dans la page entière, vous pouvez sélectionner le menu du pied de page ou un élément de l’interface d’administration.
Identifier le bloc ou l’emplacement qui produit ce menu
Avec un thème de blocs, ouvrez Apparence → Éditeur puis le modèle utilisé par la page. Dans la Vue en liste, repérez la partie d’en-tête et le bloc Navigation. Sélectionnez bien le bloc parent, et non un lien qu’il contient : leurs réglages ne portent pas sur le même objet.
Notez le menu choisi et les éventuels groupes qui entourent la navigation. Si le thème utilise des en-têtes différents selon les modèles ou des variantes de présentation, identifiez celui de la page défaillante. Modifier un autre en-tête pourrait changer le site sans atteindre le défaut. Une partie partagée peut aussi porter la correction sur plusieurs pages.
Avec un thème classique, cherchez Apparence → Menus et ses emplacements. Un emplacement est la zone que le thème prévoit pour afficher un menu. Le site peut utiliser le même emplacement sur toutes les largeurs ou en prévoir un second pour le mobile. Son nom dépend du thème ; ne supposez pas qu’un emplacement intitulé Mobile existe partout.
Ces vérifications demandent un compte autorisé à gérer l’apparence. Sur WordPress.com ou un réseau multisite, les options et installations d’extensions peuvent être limitées. L’absence d’Apparence → Menus avec un thème de blocs est normale : poursuivez avec le bloc Navigation plutôt que d’essayer de rétablir artificiellement l’ancien écran.
Confirmer si le réglage du bloc produit le bouton
Ce test concerne un thème de blocs. Ouvrez **Apparence → Éditeur** avec les droits de gestion du site. Dans le modèle ou la partie de modèle qui fournit l’en-tête de la page, sélectionnez **Navigation** depuis la **Vue en liste**. Comparez le nom du menu et la configuration de superposition. En WordPress 7.1, la visibilité de la superposition se règle dans **Superposition**. Les libellés de l’interface peuvent varier selon la langue et la version. L’option **Toujours** utilise le bouton à toutes les largeurs. Si l’icône est présente mais peu reconnaissable, testez le libellé « Menu » lorsque ce réglage est proposé et vérifiez son contraste.
Sur une copie, si les liens sont présents aux deux largeurs et que le bouton manque, passez la visibilité de la superposition de **Désactivé** à **Mobile**. Enregistrez seulement l’élément que vous avez modifié dans le récapitulatif. Rechargez la page publique à la petite largeur. Le bouton doit devenir visible et afficher les liens à l’activation. À la grande largeur, la navigation doit conserver ses liens visibles sans demander une action supplémentaire. Si l’en-tête est partagé, contrôlez une seconde page qui l’utilise. Remettez la valeur initiale si vous souhaitez garder des liens toujours affichés et qu’ils restent utilisables à petite largeur.
Si le bouton manque toujours dans la structure de la page alors que la superposition est sur **Mobile**, vérifiez d’abord que le bloc observé appartient au bon modèle. Une page différente peut charger une autre partie d’en-tête. Si le bouton figure déjà dans le bon en-tête à la largeur défaillante, cherchez une condition qui le masque plutôt que de modifier les liens du menu.
Rétablir une navigation absente de l’en-tête concerné
Si aucun bloc Navigation ne figure dans l’en-tête réellement affiché, vérifiez d’abord que cette absence n’est pas un choix volontaire. Une page d’atterrissage peut employer un modèle sans navigation. Dans ce cas, réattribuer un modèle complet ne convient que si toute sa disposition est souhaitée ; ajouter un menu au bon en-tête est une autre opération.
Pour un en-tête qui doit contenir cette navigation, conservez sa structure sur une copie. Dans l’éditeur du modèle ou de la partie, ajoutez un bloc Navigation à l’emplacement prévu. Dans ses réglages, le menu à trois points près du nom permet de choisir un menu existant. Sélectionnez le bon ensemble plutôt que de créer immédiatement une nouvelle liste.
Vérifiez les destinations affichées avant d’enregistrer. Modifier les liens d’un menu partagé peut affecter d’autres blocs qui l’utilisent. Pour retrouver un menu disparu, le choix d’un ensemble existant suffit souvent ; supprimer ou reconstruire tous ses liens ferait perdre une source encore utile.
Après sauvegarde, contrôlez les pages qui utilisent la même partie d’en-tête. Le résultat attendu est une navigation présente au bon endroit, sans deuxième menu concurrent. Pour annuler l’essai, retirez seulement le bloc ajouté ou rétablissez la référence précédente, en conservant le menu lui-même. Supprimer son affichage n’exige pas de supprimer ses données.
Tester l’emplacement mobile d’un thème classique
Sur un thème classique, vérifiez dans **Apparence → Menus → Gérer les emplacements** ce que le thème propose. Un emplacement est un endroit où le thème peut afficher un menu. Un menu est l’ensemble des liens. Un thème peut enregistrer deux emplacements, l’un pour l’ordinateur et l’autre pour le téléphone. Vérifiez dans la documentation du thème ou les options de son en-tête lequel est appelé à petite largeur. Si un seul emplacement est proposé, contrôlez son affichage mobile et les règles de son en-tête. L’existence d’un emplacement séparé dépend du thème.
Si un emplacement mobile distinct existe et que le menu est vide, notez le nom de l’emplacement et l’affectation actuelle. Sur la copie, attribuez-lui un menu existant et vérifiez ses liens avant d’enregistrer. Rechargez la page aux deux largeurs. Le bouton mobile ou les liens doivent apparaître dans la zone prévue par ce thème et les liens sur ordinateur doivent rester utilisables. Si le bon menu s’affiche sur la page de test mais que des liens changent sur une autre page, vérifiez si les deux emplacements utilisent le même ensemble. Pour annuler, rétablissez la seule affectation précédente. Les liens enregistrés dans le menu peuvent rester disponibles pour un autre emplacement.
Distinguer un bouton masqué d’un bouton absent
Dans les outils de développement, sélectionnez le bouton à la petite largeur et ouvrez **Calculé**. Un display: none sur le bouton peut expliquer son absence visuelle. Le même résultat peut venir d’un parent masqué. Remontez la structure et repérez la déclaration qui s’applique au premier élément réellement masqué. Vérifiez la condition de largeur et la source. La même règle peut être souhaitée sur ordinateur et incorrecte sur téléphone. Si l’élément a des dimensions mais reste hors de l’écran, inspectez aussi le conteneur et son éventuel débordement coupé.
Le fragment suivant est facultatif. Dans la console de la copie locale, collez la fonction puis l’appel. Remplacez .atelier64-header par un sélecteur de l’en-tête réellement rendu. Le deuxième sélecteur correspond au bouton du bloc Navigation natif. Pour un thème classique, relevez le sélecteur de son bouton dans **Éléments**. Exécutez l’appel aux deux largeurs. La fonction lit la structure et les styles calculés. La liste des masquages donne des éléments à inspecter dans **Styles**. Elle ne détermine pas à elle seule si un débordement coupe le bouton ou si un bandeau le recouvre.
Dans **Styles**, décochez provisoirement la déclaration confirmée à la largeur défaillante. Si le bouton revient et que ses liens s’ouvrent, corrigez la règle à l’endroit où elle a été créée, sur la copie. Si elle vient du CSS personnalisé, notez la déclaration et son contexte avant de la modifier. Dans un thème de blocs, le CSS additionnel se trouve dans le menu des options des **Styles**. Avec un thème classique qui utilise le personnalisateur, vérifiez **Apparence → Personnaliser → CSS additionnel**. Si un constructeur ou le thème génère la déclaration, corrigez le réglage qui la produit. Rejouez les deux largeurs et vérifiez que le bouton reste masqué là où les liens doivent rester visibles. Pour annuler, rétablissez la déclaration précise. Évitez d’ajouter une règle générale qui force le panneau lui-même à s’afficher partout.
function releverMenuMobile(enTete, declencheur) {
const zone = document.querySelector(enTete);
const bouton = zone?.querySelector(declencheur);
const resultat = { largeur: window.innerWidth, enTete: Boolean(zone), bouton: Boolean(bouton) };
if (!bouton) return resultat;
const rectangle = bouton.getBoundingClientRect();
const masquages = [];
for (let element = bouton; element; element = element.parentElement) {
const style = getComputedStyle(element);
if (style.display === 'none' || style.visibility !== 'visible' || Number(style.opacity) === 0) {
masquages.push({
element: element.tagName,
classe: element.getAttribute('class'),
display: style.display,
visibility: style.visibility,
opacity: style.opacity,
});
}
}
return {
...resultat,
taille: [Math.round(rectangle.width), Math.round(rectangle.height)],
horsFenetreHorizontale: rectangle.right <= 0 || rectangle.left >= window.innerWidth,
masquages,
};
}
releverMenuMobile('.atelier64-header', '.wp-block-navigation__responsive-container-open');Redonner de la place au bouton dans l’en-tête
Un bouton peut exister sans être accessible à l’écran. Un logo trop large, des espacements excessifs ou un conteneur qui coupe ses enfants peuvent le repousser hors de la zone visible. Comparez le cadre de la navigation dans l’inspecteur et la place réellement disponible, plutôt que d’augmenter immédiatement sa priorité d’empilement.
Dans l’éditeur, sélectionnez le groupe ou la rangée qui contient le logo et Navigation. Examinez les réglages de disposition, de justification, de retour à la ligne et d’espacement proposés. Relevez les valeurs initiales, puis réduisez l’espace inutile ou la largeur du logo. Contrôlez la modification à plusieurs largeurs, car une valeur convenable sur un téléphone peut dégrader une largeur intermédiaire.
Si l’inspection révèle une hauteur fixe et un débordement masqué dans un CSS personnalisé, corrigez la règle d’origine après avoir confirmé son effet temporairement. Retirer toutes les limites de débordement sur le site pourrait faire apparaître d’autres éléments cachés volontairement.
Le résultat attendu est un bouton entièrement visible, avec suffisamment de place pour être actionné, sans recouvrir les autres fonctions de l’en-tête. Pour annuler, restaurez les seules valeurs changées. Si un bandeau recouvre la navigation, corrigez sa disposition propre ; empiler des valeurs énormes de z-index ne garantit pas une superposition correcte dans tous les contextes.
Option pour un emplacement classique : Max Mega Menu
Max Mega Menu peut fournir une navigation mobile à un emplacement classique compatible si les réglages du thème ne répondent pas au besoin. Le produit est publié sous l’auteur megamenu dans le répertoire officiel. Sa version 3.10.8 vérifiée demande WordPress 6.2 et PHP 7.4 minimum, avec un test déclaré jusqu’à WordPress 7.1.4. L’affichage mobile de base existe dans la version gratuite.
Ce parcours suppose un emplacement déjà enregistré et affiché par le thème. L’extension ne réparera pas un en-tête qui n’affiche aucune zone de menu. Conservez les affectations actuelles et essayez sur une copie avant de remplacer le comportement de navigation du site.
Gardez cette option si elle résout le besoin sans doublon et reste utilisable au clavier. Elle ne justifie pas de remplacer un bloc Navigation natif qui fonctionne correctement.
- Dans Extensions → Ajouter une extension, recherchez Max Mega Menu et vérifiez l’auteur.
- Installez et activez l’extension.
- Dans Apparence → Menus, choisissez le menu affecté à l’emplacement voulu.
- Dans la boîte Max Mega Menu Locations à gauche, activez l’intégration pour ce seul emplacement et enregistrez.
- Réduisez la largeur de la page publique pour vérifier le déclencheur et les liens.
- Si l’ancien bouton du thème reste présent, suivez l’intégration documentée pour ce thème ; ne masquez pas globalement tous les boutons.
- Pour annuler l’essai, désactivez cette intégration ou la seule extension nouvellement ajoutée, puis vérifiez le retour au menu du thème.
Éviter un trou entre les deux seuils d’affichage
Si le thème cache son menu ordinateur à une largeur différente de celle où le composant mobile apparaît, une plage peut ne proposer aucune navigation. Reprenez les largeurs relevées au diagnostic et vérifiez les deux passages. Un essai uniquement sur un grand écran puis sur un téléphone étroit peut manquer ce défaut intermédiaire.
Avec Max Mega Menu, le réglage Responsive Breakpoint se trouve dans Mega Menu → Menu Themes → Mobile Menu. Choisissez le thème de menu réellement utilisé par l’emplacement, relevez le seuil actuel et rapprochez-le du comportement de l’en-tête si nécessaire. Les valeurs de démonstration de la documentation ne sont pas des prescriptions pour votre site.
Avec le bloc Navigation natif, utilisez d’abord son mode Mobile ou Toujours selon le besoin. Ne supposez pas qu’un champ de seuil numérique identique existe dans toutes les versions. Une personnalisation CSS du seuil exige de comprendre les règles du bouton et du panneau ensemble ; une règle isolée peut les désynchroniser.
Le résultat attendu est une navigation disponible pendant toute la réduction de largeur, sans doublon permanent. Vérifiez quelques largeurs de part et d’autre du passage, puis les orientations du téléphone. Rétablissez le seuil précédent si l’ajustement gêne la version ordinateur ou si une autre partie de l’en-tête ne suit pas.
Vérifier l’ouverture, les liens et l’usage au clavier
Retrouver un bouton visible est la première étape ; il faut encore que la navigation permette d’atteindre les pages. Testez en visiteur déconnecté, sur le téléphone concerné et avec le clavier sur ordinateur à petite largeur. Le contrôle doit couvrir une ouverture et une fermeture complètes, pas seulement un aperçu du panneau.
Commencez avec la touche Tab et observez l’indicateur de focus, qui montre l’élément prêt à être activé. Actionnez le bouton avec le clavier et vérifiez l’accès aux liens. Testez aussi les sous-menus s’il y en a. Un fonctionnement limité au survol de souris ne suffit pas pour une navigation tactile ou au clavier.
La fermeture doit rester identifiable et utilisable. Après fermeture, vérifiez que la navigation dans la page reste normale. Si le panneau s’ouvre mais masque un lien ou rend un sous-menu inaccessible, traitez ce comportement avant de considérer la réparation terminée.
- Ouvrez et refermez le menu plusieurs fois.
- Suivez un lien principal et un lien de sous-menu.
- Vérifiez le focus visible et l’ordre de navigation au clavier.
- Testez le défilement si la liste dépasse la hauteur disponible.
- Contrôlez l’accueil et les pages internes partageant l’en-tête.
- Revenez aux réglages conservés si une nouvelle navigation empêche ces usages essentiels.
Comparer les résultats sur une page témoin
La recette a rendu une même page avec WordPress 7.1.4 et deux thèmes fictifs. Le navigateur a mesuré une zone visible de 1 258 pixels CSS puis de 538 pixels CSS. Sur le thème de blocs, en mode Désactivé, le bouton était absent de la structure aux deux tailles et les liens Contact et Agenda restaient visibles. En mode Mobile, le bouton était présent aux deux tailles, masqué à grande largeur et visible à petite largeur. Son activation à 538 pixels ouvrait le panneau et affichait les deux liens.
Avec le mode Mobile inchangé, une déclaration CSS du thème a ensuite masqué le bouton uniquement à la petite largeur. La sonde a trouvé le bouton avec un display: none, et le navigateur a relevé qu’aucun des liens de ce menu n’était visible avant ouverture. À grande largeur, Contact et Agenda étaient toujours visibles. Cette différence distingue un bouton rendu puis masqué d’un bouton que le réglage ne produit pas.
Sur le thème classique de test, l’emplacement pour ordinateur était affecté. À petite largeur, le thème masquait cette navigation et rendait son bouton seulement si l’emplacement mobile avait un menu. Lorsque cet emplacement était vide, aucun bouton ne figurait dans l’en-tête à petite largeur. Après affectation du menu, le bouton s’affichait, son ouverture rendait les deux liens visibles, et la navigation pour ordinateur conservait ses liens. Le résultat concerne un thème classique qui définit réellement cette condition.
Pour contrôler votre correction, relisez le même en-tête aux deux largeurs et sur une autre page qui utilise la même partie de modèle. Avec le panneau fermé, vérifiez que le bouton reste visible là où il est attendu. Ouvrez-le, contrôlez les destinations et essayez la fermeture ainsi que la navigation au clavier. Sur un téléphone réel, vérifiez aussi l’affichage lorsque le navigateur réduit sa zone de contenu ou que le menu passe sur deux lignes. Consignez le réglage ou la règle que vous avez changé. Si le bouton est visible à la bonne largeur et que le panneau refuse encore de s’ouvrir, gardez ces mesures et poursuivez le diagnostic de l’ouverture.
Confirmer la correction publique et conserver les bons repères
Si l’éditeur montre le bon menu mais que le public conserve l’ancien affichage, assurez-vous d’avoir enregistré le modèle ou la partie réellement utilisée. Rechargez ensuite la page et actualisez le cache concerné avec l’outil déjà présent. Évitez d’ajouter une autre extension de cache pour résoudre un mauvais réglage de navigation.
Comparez les adresses, la session et la largeur avant d’interpréter une différence. Un utilisateur connecté peut recevoir un autre état ou ne pas employer le même cache qu’un visiteur. La barre d’administration peut également réduire l’espace visible. Gardez un contrôle déconnecté comme témoin de la correction.
Consignez le modèle, la partie d’en-tête, le menu choisi et le mode de repli. Pour un thème classique, relevez l’emplacement et son affectation. Avec une extension, notez l’intégration et le seuil réellement retenus. Ces quelques informations évitent de reconstruire le menu lors d’un prochain changement d’apparence.
Si le problème persiste, transmettez une page, la plage de largeurs défaillante, le type de navigation et la règle ou le réglage déjà vérifié. Précisez si le bouton est absent, invisible ou présent sans ouverture. Cette distinction permet de poursuivre sur le bon problème sans multiplier des corrections contradictoires dans l’en-tête.
