Il peut être frustrant lorsque votre menu de navigation WordPress se décale soudainement derrière la barre d'administration. Nous avons vu cela arriver à de nombreux utilisateurs, surtout après l'installation d'un nouveau thème ou l'activation de certains plugins.
Ce problème est plus courant que vous ne le pensez. De nombreux thèmes WordPress ne tiennent pas compte de l'espace occupé par la barre d'outils d'administration affichée aux utilisateurs connectés, ce qui peut décaler votre menu.
Dans ce guide, nous vous montrerons plusieurs façons de corriger le menu de navigation WordPress qui apparaît sous la barre d'administration. Que vous souhaitiez une solution rapide et non technique ou une solution CSS propre, vous trouverez une méthode qui fonctionnera pour votre site.
Pourquoi la barre d'administration WordPress chevauche-t-elle le menu de navigation ?
Si votre menu de navigation WordPress semble être caché ou chevaucher la barre d'administration, vous êtes peut-être confronté à un problème d'affichage courant.
Nous avons constaté que ce problème se produit lorsque le CSS d'un thème ne tient pas correctement compte de la hauteur de la barre d'administration. Le CSS obstrue alors des parties de l'en-tête de votre site, y compris le menu de navigation.
Vous pourriez remarquer que certains éléments du menu sont difficiles à cliquer ou que le menu entier est partiellement couvert lorsque vous visualisez votre site. Cela peut être frustrant, surtout lorsque cela affecte l'utilisabilité de votre site web.
Il y a quelques raisons courantes pour lesquelles cela peut se produire :
- Conflits de thèmes : Parfois, le CSS de votre thème ne prend pas en compte la barre d'administration, ce qui entraîne un positionnement incorrect du menu.
- Conflits de plugins : Un plugin qui modifie le design du front-end peut involontairement faire chevaucher le menu avec la barre d'administration. Cela peut inclure des plugins qui ajoutent des méga menus ou des bannières d'en-tête.
- CSS personnalisé : Si vous avez ajouté du CSS personnalisé à votre site, il se peut qu'il interfère avec l'affichage correct de votre menu.
Ce problème peut affecter l'utilisabilité de votre site, rendant la navigation plus difficile pour les utilisateurs. Heureusement, il existe plusieurs façons de résoudre ce problème, en commençant par une solution simple qui ne nécessite aucun codage.
Voici un aperçu des solutions que nous allons vous présenter. Vous pouvez passer à celle avec laquelle vous êtes le plus à l'aise :
- Solution 1 : Masquer la barre d'administration via les paramètres du profil utilisateur
- Solution 2 : Corriger le chevauchement avec du CSS personnalisé
- Solution 3 : Vérifier les conflits de plugins
- Ressources supplémentaires pour l'administration WordPress
Solution 1 : Masquer la barre d'administration via les paramètres du profil utilisateur
C'est le moyen le plus simple de résoudre le problème si vous n'êtes pas à l'aise avec l'ajout de code. Cela fonctionne bien pour les débutants ou les utilisateurs qui n'ont pas la permission de modifier le thème ou d'ajouter du CSS personnalisé.
Au lieu de corriger la mise en page, cette méthode masque entièrement la barre d'administration afin qu'elle ne recouvre plus le menu.
Attention : Masquer la barre d'administration signifie que vous ne verrez plus les liens rapides pour modifier les articles, gérer les commentaires ou accéder aux mises à jour des plugins lorsque vous naviguez sur votre site.
De plus, ce paramètre ne s'applique qu'à votre compte utilisateur. Si d'autres personnes utilisent le site, elles devront suivre les mêmes étapes ci-dessous.
Pour ce faire, connectez-vous à votre tableau de bord WordPress et accédez à Utilisateurs » Profil dans le menu de gauche.
Faites défiler jusqu'à la section Barre d'outils et décochez la case « Afficher la barre d'outils lors de la visite du site ».
Cliquez sur le bouton « Mettre à jour le profil » en bas pour enregistrer vos modifications.
Pourquoi cela fonctionne
En désactivant la barre d'administration, vous supprimez l'élément qui déplace le menu. C'est une solution simple qui évite des problèmes de mise en page plus profonds, en particulier sur les sites où seuls les utilisateurs connectés voient le problème.
Solution 2 : Corriger le chevauchement avec du CSS personnalisé
Si vous êtes à l'aise avec le code personnalisé et que vous souhaitez une solution à long terme, l'ajout de CSS est la voie à suivre. Cela vous permet de contrôler exactement le comportement de l'en-tête, sans désactiver la barre d'administration.
Nous vous recommandons d'utiliser le plugin WPCode pour ajouter en toute sécurité du CSS personnalisé. Il fonctionne avec n'importe quel thème et vous permet d'appliquer votre correctif uniquement aux utilisateurs connectés (car les visiteurs ne voient pas la barre d'administration).
Étape 1 : Inspecter l'élément d'en-tête
Faites un clic droit sur l'en-tête ou le menu de navigation de votre site et choisissez « Inspecter » dans votre navigateur. Cela ouvrira les outils de développement.
Survolez le HTML avec votre souris.
Le navigateur mettra en surbrillance l'élément correspondant sur la page.
Recherchez une classe ou un ID qui englobe votre navigation. Vous l'utiliserez dans votre CSS personnalisé.
Étape 2 : Installer WPCode
Installez et activez le plugin WPCode. Il est convivial pour les débutants et vous permet d'ajouter du code sans modifier les fichiers du thème.
Vous pouvez utiliser la version gratuite pour ce tutoriel, mais la version Pro offre des fonctionnalités supplémentaires pour les projets plus importants.
Étape 3 : Ajouter le snippet CSS
Allez dans Snippets de code » Ajouter un snippet, et choisissez « Ajouter votre code personnalisé (Nouveau snippet) ».
Tout d'abord, donnez un nom descriptif à votre snippet. Ainsi, vous pourrez facilement vous souvenir de son utilité plus tard. Nous l'appellerons « Corriger la barre d'administration qui se chevauche ».
Ensuite, sélectionnez « Snippet CSS » comme type de code.
Après cela, collez ce code CSS dans l'éditeur :
.logged-in .main-navigation {
margin-top: 32px;
z-index: 9999;
position: relative;
}
Ceci cible uniquement le menu de navigation pour les utilisateurs connectés, corrigeant le problème sans modifier l'apparence du site pour les visiteurs.
Si votre thème utilise une classe ou un ID différent, remplacez .main-navigation par celui de votre outil d'inspection.
Étape 4 : Utiliser la logique conditionnelle intelligente
Faites défiler jusqu'à la section « Logique conditionnelle intelligente » dans WPCode et activez-la.
Définissez la condition sur « Afficher » si « Connecté » est « Vrai ».
Cliquez ensuite sur « Enregistrer le snippet » et faites-le passer de Inactif à Actif.
Visitez maintenant votre site et voyez si le menu apparaît au-dessus de la barre d'administration.
Sinon, ajustez la marge supérieure ou modifiez votre sélecteur.
Pourquoi cela fonctionne
Certains thèmes ne tiennent pas compte de la hauteur de 32px de la barre d'administration. Ce CSS ajoute un espacement et fait avancer votre en-tête, corrigeant la mise en page uniquement pour les utilisateurs qui voient la barre d'administration.
Solution 3 : Vérifier les conflits de plugins
Si le menu apparaît toujours sous la barre d'administration après avoir essayé les solutions précédentes, un conflit de plugin pourrait en être la cause.
Certains plugins ajoutent leur propre CSS ou JavaScript, ce qui peut interférer accidentellement avec la mise en page de votre thème, surtout s'ils modifient la zone d'en-tête ou de navigation.
Nous avons vu cela se produire sur des sites clients, et trouver le plugin conflictuel résout souvent le problème sans avoir à toucher au code.
Étape 1 : Désactiver tous les plugins
Accédez à votre tableau de bord et allez dans Plugins » Plugins installés.
Sélectionnez tous les plugins à l'aide de la case à cocher en haut, choisissez « Désactiver » dans le menu des actions groupées, puis cliquez sur « Appliquer ».
Visitez maintenant votre site Web. Si le menu de navigation semble normal, alors l'un des plugins était probablement le coupable.
Étape 2 : Réactiver les plugins un par un
Retournez à l'écran « Plugins installés » et réactivez chaque plugin individuellement. Après chacun, rechargez votre site et vérifiez le menu.
Continuez ainsi jusqu'à ce que le problème réapparaisse. Le dernier plugin que vous avez activé est celui qui cause le conflit.
Étape 3 : Décidez quoi faire
Une fois que vous avez identifié le plugin problématique, vous avez plusieurs options. Tout d'abord, essayez de contacter le développeur du plugin pour obtenir de l'aide. Il connaît peut-être déjà le problème ou peut vous suggérer une solution de contournement.
Si aucune solution n'est disponible, vous pouvez rechercher un plugin alternatif offrant des fonctionnalités similaires sans causer de problèmes de mise en page.
Ressources supplémentaires pour l'administration WordPress
Voici quelques ressources supplémentaires qui pourraient vous être utiles :
- Comment désactiver la barre d'administration WordPress pour tous les utilisateurs sauf les administrateurs
- Comment corriger le problème de barre d'administration manquante dans WordPress (méthodes)
- Comment corriger l'éditeur de fichiers de thème manquant dans l'administration WordPress (correction facile)
- Comment ajouter des liens de raccourcis personnalisés à votre barre d'outils d'administration WordPress
- Guide du débutant pour le dépannage des erreurs WordPress (étape par étape)
Nous espérons que les solutions que nous avons partagées résoudront le problème d'affichage du menu de navigation ou de l'en-tête causé par la barre d'administration sur votre site web.
Vous voudrez peut-être aussi consulter notre guide sur la correction des erreurs WordPress les plus courantes ou jeter un œil à nos astuces pour personnaliser la zone d'administration de WordPress selon vos besoins.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Samuel
il y a quelque temps, alors que je travaillais pour un client, j'ai eu ce problème, et il a été résolu en modifiant le CSS du thème, car je comprends le CSS. Cet article a apporté d'autres méthodes qui ne me seraient pas venues à l'esprit normalement pour traiter ce type de problème. il est toujours bon d'être armé de différentes manières de résoudre un problème WordPress. Maintenant, j'ai d'autres options si cela me arrive à nouveau. article très utile. merci.