Tutoriels WordPress de confiance, quand vous en avez le plus besoin.
Guide du débutant pour WordPress
WPB Cup
25 millions+
Sites web utilisant nos plugins
16+
Années d'expérience WordPress
3000+
Tutoriels WordPress par des experts

Comment styliser les menus de navigation WordPress (Mis à jour)

Un menu bien stylisé peut faire une grande différence. Il peut améliorer l'apparence générale de votre site, permettre aux visiteurs de trouver plus facilement ce qu'ils cherchent et même les encourager à cliquer sur certaines pages.

Chez WPBeginner, nous avons vu toutes sortes de façons créatives de styliser les menus. Nous avons également expérimenté le style de notre propre menu de navigation à plusieurs reprises au fil des ans. Nous voulons donc partager ce qui fonctionne le mieux pour différentes situations.

Dans cet article, nous vous montrerons comment styliser votre menu de navigation WordPress de 5 manières différentes.

Comment styliser les menus de navigation WordPress

Pourquoi styliser votre menu de navigation WordPress ?

Votre menu de navigation WordPress est la feuille de route de votre site web, guidant les visiteurs vers les pages les plus importantes. Il apparaît en haut de la plupart des sites web, ce qui en fait un endroit privilégié pour attirer l'attention et influencer la façon dont les utilisateurs explorent votre contenu.

Styliser votre menu de navigation va au-delà de la simple esthétique. Cela peut améliorer considérablement l'expérience utilisateur de votre site web et, par conséquent, booster votre optimisation pour les moteurs de recherche (SEO).

Si la conception de votre menu est difficile à utiliser, les visiteurs pourraient avoir du mal à trouver ce qu'ils cherchent et repartir frustrés. D'un autre côté, un menu clair et visuellement attrayant peut les encourager à naviguer vers différentes sections et à passer plus de temps sur votre site.

En conséquence, vous pouvez augmenter les vues de page de votre site et réduire son taux de rebond.

Ce guide détaillera différentes méthodes pour styliser votre menu de navigation, en fonction de votre thème WordPress et de votre niveau de confort. Vous pouvez utiliser les liens rapides ci-dessous pour naviguer dans ce tutoriel et trouver la méthode qui vous convient le mieux :

Méthode 1 : Personnaliser votre menu de navigation avec l'éditeur complet du site (Thèmes blocs)

Si vous utilisez un thème bloc et que vous souhaitez styliser votre menu de navigation de site en utilisant l'éditeur complet du site, c'est la méthode qu'il vous faut.

Tout d'abord, rendez-vous sur votre tableau de bord WordPress et accédez à Apparence » Éditeur.

Sélection de l'Éditeur de site complet depuis le panneau d'administration WordPress

Ici, vous verrez des options pour personnaliser différentes parties de votre thème bloc.

Cliquez sur « Navigation ».

Sélection de la Navigation dans l'édition complète du site WordPress

Sur la page suivante, cliquez sur l'icône « Modifier » en forme de crayon.

Cela ouvrira l'éditeur de blocs, où vous pourrez modifier votre bloc de Navigation.

Cliquer sur le bouton d'édition en forme de crayon pour la Navigation dans l'édition complète du site WordPress

Une fois dans l'éditeur de blocs, cliquez sur le bloc « Liste de pages » qui affiche les pages de votre site web WordPress comme éléments de menu de navigation.

Ensuite, cliquez sur « Modifier ».

Modification du bloc de liste de pages

Une fenêtre contextuelle apparaîtra maintenant, vous informant que vous pouvez maintenant modifier le bloc Liste de pages. Vous pouvez modifier, supprimer, réorganiser et ajouter de nouveaux éléments de menu au bloc.

Cliquez sur « Modifier » pour continuer.

Confirmation de la modification du bloc de liste de pages

L’éditeur de blocs pour le menu de navigation fonctionne comme lorsque vous modifiez une page ou un article. N’hésitez pas à ajouter d’autres éléments de menu tels que des liens personnalisés, un bouton d’appel à l’action, un formulaire de recherche, un logo de site, et bien plus encore.

Si vous souhaitez approfondir la gestion des menus avec l’éditeur complet du site, consultez la section sur la façon de modifier votre menu de navigation dans notre guide de l’éditeur complet du site. Cette section aborde également la création de sous-menus.

Ajout d'éléments de menu au menu de navigation dans FSE

Passons maintenant à la mise en forme. Cliquez sur n’importe quel bloc pour commencer.

Selon le bloc, la barre d'outils peut offrir certaines options de personnalisation. Par exemple, si vous sélectionnez un lien de page, vous pouvez le mettre en gras, en italique, le barrer et le réorganiser si nécessaire.

Vous pouvez utiliser ces outils pour mettre en évidence un seul élément de menu parmi les autres.

Les paramètres de la barre d'outils du bloc pour un lien de page dans le menu

Dans le panneau des paramètres à droite, basculez vers l'onglet « Bloc », puis sous celui-ci, accédez à l'onglet « Styles ».

Ici, vous pouvez personnaliser la couleur, la typographie, les dimensions, les bordures et les ombres de votre bloc.

L'onglet styles de bloc pour les éléments de bloc dans le menu de navigation

Les blocs ont tendance à avoir des paramètres de style par défaut. Par exemple, si vous modifiez un lien de page, vous ne verrez peut-être que des options telles que « Taille de la police » et « Largeur ».

Mais ne vous inquiétez pas. Cliquez simplement sur le menu à trois points à côté de ces options pour activer davantage de possibilités de personnalisation, comme la modification de la famille de polices et de l'espacement des lettres.

Activation de plus de fonctionnalités de style dans l'onglet styles de bloc

De même, si vous avez un bloc de bouton dans votre menu de navigation, cliquer dessus révélera des options pour personnaliser son style, son texte, sa couleur d'arrière-plan, sa typographie, ses dimensions, sa bordure et même son ombre.

Vous pouvez lire notre guide sur comment ajouter un bouton d'appel à l'action pour plus d'informations.

Ajout d'une ombre portée au bouton d'appel à l'action

Si vous souhaitez modifier la couleur d'arrière-plan de votre menu de navigation, vous devrez le faire en modifiant le modèle d'en-tête de votre thème.

Pour l'ouvrir, cliquez simplement sur le champ de recherche de commande en haut qui dit « Navigation ». Ensuite, tapez « En-tête » et appuyez sur la touche Entrée.

Navigation vers le modèle d'en-tête dans FSE

Maintenant, ouvrez la vue Liste et sélectionnez Groupe.

Ce groupe comprend le titre du site de votre en-tête et le menu de navigation.

Sélection du groupe dans la vue Liste dans FSE

Ensuite, ouvrez l'onglet « Styles » dans la barre latérale des paramètres du bloc et cliquez sur « Arrière-plan » dans la section Couleur.

Après cela, choisissez simplement une couleur d'arrière-plan pour votre modèle d'en-tête.

Modification de la couleur d'arrière-plan de l'en-tête dans FSE

Une fois que vous êtes satisfait du style de votre menu de navigation, cliquez simplement sur le bouton « Enregistrer », et votre nouveau menu et votre en-tête seront en ligne sur votre blog WordPress ou votre site.

Voici à quoi ressemble notre menu de navigation sur notre site de démonstration :

Exemple de menu de navigation stylisé avec FSE

Gardez à l'esprit que les choix de style que vous aurez dépendront des options de style globales de votre thème spécifique.

Si vous souhaitez personnaliser les styles globaux de votre thème, vous devez cliquer sur le bouton « Styles » dans le coin supérieur droit.

Ouverture de l'onglet styles globaux dans FSE

À partir d'ici, vous pouvez modifier la typographie, les couleurs et la mise en page de l'ensemble du site Web.

Remarque : N'oubliez pas que les modifications que vous apportez ici affecteront non seulement votre menu de navigation, mais aussi d'autres parties de votre thème.

Pour plus d'informations, consultez la section sur comment modifier les styles globaux de votre site Web dans le guide d'édition complète du site.

Méthode 2 : Personnaliser votre menu de navigation avec le personnaliseur de thème (Thèmes classiques)

Cette méthode s'adresse aux utilisateurs de thèmes WordPress classiques qui souhaitent styliser leur menu de navigation à l'aide du personnalisateur de thème intégré.

Comme avec la méthode précédente, nous nous concentrerons sur le style de l'apparence du menu plutôt que sur la gestion des éléments du menu eux-mêmes.

Si vous souhaitez apprendre à créer des menus et à les gérer dans les thèmes classiques, consultez notre guide sur l'ajout d'un menu de navigation dans WordPress. Il couvre la création de menus avec le personnaliseur, leur attribution à différents emplacements de menu et l'ajout de menus en tant que widgets.

Pour utiliser le personnaliseur de thème, rendez-vous sur votre tableau de bord WordPress et accédez à Apparence » Personnaliser. Ensuite, cliquez sur le bouton « Personnaliser » à côté de votre thème actif.

Le personnaliseur de thème WordPress

Ici, vous verrez des options pour personnaliser divers aspects de votre thème, ce qui dépendra du thème que vous utilisez. Dans la plupart des cas, les thèmes WordPress ont une option « Menus », mais les développeurs tiers peuvent également ajouter d'autres paramètres.

Par exemple, le thème Sydney dispose d'un constructeur d'en-tête dédié pour la personnalisation du menu. Assurez-vous de consulter la documentation de votre thème pour voir s'il ajoute des paramètres de menu spéciaux.

Le menu du constructeur d'en-tête dans Sydney

Si votre thème ne propose pas de telles options de personnalisation, ne vous inquiétez pas. Nous pouvons facilement styliser le menu à l'aide de CSS personnalisé.

Tout d'abord, cliquez sur la section « Menus ».

Sélection des menus dans le personnalisateur de thème

Sur la page suivante, cliquez sur l'icône d'engrenage « Paramètres », puis sélectionnez « Classes CSS ».

Cela vous permet d'attribuer une classe CSS unique à chaque élément de menu, vous permettant ainsi de les styliser individuellement plus tard.

Ajout de classes CSS aux éléments de menu

Ensuite, faites défiler le panneau.

Ensuite, ouvrez votre menu principal.

Sélection du menu principal dans le personnalisateur de thème

Ce que vous voulez faire maintenant, c'est trouver l'élément de menu que vous souhaitez modifier et cliquer dessus pour le développer.

Vous verrez une nouvelle option pour ajouter une classe CSS personnalisée. Dans l'exemple ci-dessous, nous ajoutons simplement la classe CSS contact-us à notre page Contactez-nous.

Ajout d'une classe CSS à un élément de menu

Une fois que vous avez attribué des classes CSS à vos éléments de menu, retournez au menu principal dans le personnalisateur de thème.

Ensuite, cliquez sur « CSS additionnel ».

Ouverture de l'onglet CSS supplémentaire dans le personnaliseur de thème

Ici, vous pouvez ajouter du code CSS personnalisé pour styliser votre menu de navigation.

Explorons quelques exemples, et n'hésitez pas à modifier les classes CSS et le code couleur hexadécimal :

Changer la couleur d'arrière-plan de l'élément de menu

L'extrait de code suivant modifie la couleur d'arrière-plan de l'élément de menu avec la classe CSS contact-us en vert (#E3FFA8) et ajoute des coins arrondis (border-radius: 5px) :

.contact-us {
  background-color: #E3FFA8;
  border-radius: 5px;
}
Ajout d'une couleur d'arrière-plan à un élément de menu avec CSS

Changer la couleur par défaut des liens du menu

Cet extrait de code change la couleur de tous les liens du menu dans la liste du menu principal (#primary-menu-li a) en rouge (#ff0000) :

.primary-menu li a {
    color: #ff0000; 
}

Notez que la classe CSS du menu principal de votre thème peut être différente de la nôtre.

Modification des couleurs des liens dans le menu de navigation avec CSS

Pour voir quelle est la classe CSS de votre menu principal, vous pouvez utiliser l'outil d'inspection autour de la zone de votre menu de navigation.

Ensuite, recherchez un code HTML qui dit « menu » ou « navigation-menu ». Il devrait y avoir une classe CSS qui le définit à côté.

La classe CSS pour le menu principal

Ajouter des effets de survol aux éléments de menu

Ce fragment de code cible tous les éléments de menu dans la liste du menu principal (#primary-menu li) et ajoute un effet de survol :

.primary-menu li a:hover {
  background-color: #a6e4a5;
	color: #666;
	border-radius: 5px;
	}

Lorsqu'un utilisateur survole un élément de menu, la couleur d'arrière-plan passe à un vert clair (#a6e4a5), la couleur du texte passe à un gris foncé (#666) et des coins arrondis sont ajoutés (border-radius: 5px).

Ajout d'effets de survol aux éléments de menu avec CSS

Créer des menus de navigation transparents dans WordPress

Ce fragment de code CSS peut rendre votre menu de navigation transparent :

#site-navigation { 
background-color:transparent; 
}

L'utilisation de cet effet le fera se fondre avec l'image d'arrière-plan pour donner à votre site un aspect épuré et moderne.

Menus de navigation transparents

Pour plus d'inspiration, vous pouvez consulter nos guides ci-dessous :

N'oubliez pas que ce ne sont là que quelques exemples pour vous aider à démarrer. Si vous souhaitez utiliser ces mêmes méthodes mais que vous ne trouvez pas la section CSS additionnel, consultez notre guide sur la façon de résoudre le problème du personnalisateur de thème manquant.

Cette méthode est parfaite pour ceux qui souhaitent plus de contrôle sur l'apparence de leur menu de navigation tout en préférant une expérience conviviale. C'est également une excellente option si vous êtes encore aux premières étapes de la création de votre site Web et que vous ne l'avez pas encore lancé.

Un constructeur de pages plugin vous permet de concevoir visuellement la mise en page de votre site Web à l'aide de fonctionnalités de glisser-déposer sans avoir besoin d'écrire de code. Cela le rend idéal pour les débutants complets.

Dans cette section, nous utiliserons SeedProd comme notre plugin de construction de pages. SeedProd offre une interface conviviale et comprend des blocs et des fonctionnalités supplémentaires pour que votre menu de navigation se démarque.

Note : Nous utiliserons SeedProd Pro, car la fonctionnalité de création de thèmes n'est disponible que dans la version Pro. Cependant, n'hésitez pas à utiliser la version gratuite pour découvrir SeedProd.

Étape 1 : Installer et activer SeedProd

Tout d'abord, installez et activez le plugin SeedProd sur votre site Web WordPress. Vous pouvez lire notre guide sur comment installer un plugin WordPress pour plus d'informations.

Une fois activé, accédez à SeedProd » Paramètres depuis votre tableau de bord WordPress. Ensuite, entrez votre clé de licence SeedProd et cliquez sur le bouton « Vérifier la clé ».

Ajout de la clé de licence SeedProd à votre site WordPress

Étape 2 : Choisissez un kit de modèles de thème SeedProd

Rendez-vous maintenant sur SeedProd » Theme Builder. C'est ici que vous pouvez créer un thème WordPress personnalisé à partir de zéro.

Cliquez sur le bouton « Kits de modèles de thème » pour parcourir une galerie de modèles prédéfinis.

Accès aux kits de modèles de thème de SeedProd

Pour ce tutoriel, nous utiliserons le thème de site Web médical Smile Craft. Cependant, n'hésitez pas à choisir n'importe quel modèle qui convient à votre entreprise.

Vous pouvez prévisualiser ces kits de modèles de thème en cliquant sur l'icône de la loupe pour voir lequel correspond au style de votre site Web.

Une fois que vous avez trouvé un modèle de thème qui vous plaît, cliquez sur l'icône de la coche orange pour importer les parties du modèle.

Choix d'un kit de modèles de thème dans SeedProd

SeedProd va maintenant créer les sections essentielles du site Web comme l'en-tête, le pied de page, la page d'accueil, et ainsi de suite. Tous ces éléments peuvent être modifiés visuellement à l'aide de l'éditeur par glisser-déposer.

Étape 3 : Personnaliser la conception du menu

Une fois le modèle de thème installé, vous retournerez à la page du constructeur de thèmes.

Dans un modèle de thème SeedProd, le menu de navigation se trouve dans la partie modèle d'en-tête.

Pour modifier votre modèle d'en-tête, survolez-le simplement avec votre souris et cliquez sur le lien « Modifier la conception ». Cela ouvrira le modèle dans l'éditeur par glisser-déposer.

Modification d'un en-tête de thème SeedProd

Vous verrez maintenant une section d'en-tête qui se compose du bloc « Menu de navigation » (qui est votre menu de navigation) et d'autres blocs, selon le thème.

Pour modifier le menu, cliquez sur le bloc « Menu de navigation ». La barre latérale gauche vous affichera alors une liste des paramètres du bloc.

Modification du bloc Menu de navigation

Par défaut, SeedProd utilise le menu « Simple » pour créer un menu basé sur le modèle de thème que vous utilisez. Cependant, vous pouvez également opter pour l'option « Menu WordPress » pour utiliser un menu préexistant que vous avez déjà créé à l'aide de l'éditeur de menu WordPress standard (Apparence » Menus).

Décomposons la différence entre les deux. La méthode Simple vous permet d'ajouter, de modifier et de supprimer des liens directement dans l'interface du constructeur de pages.

Pour créer un nouvel élément de menu, cliquez sur le bouton « + Ajouter un nouvel élément ».

Modification du menu de navigation simple dans SeedProd

Ici, vous pouvez entrer le libellé du texte et l'URL du lien.

Ensuite, choisissez d'ouvrir le lien dans une nouvelle fenêtre et ajoutez un attribut nofollow (si nécessaire). Comme ceci :

Configuration d'un nouvel élément de menu dans le menu simple de SeedProd

Vous pouvez également réorganiser les éléments du menu en cliquant sur le bouton à trois lignes à côté d'un élément et en le faisant glisser vers le haut ou vers le bas.

Pour supprimer un élément de menu, survolez-le simplement et cliquez sur l'icône de corbeille à côté.

Suppression ou réorganisation des éléments de menu dans SeedProd

L'inconvénient de cette option est que vous ne pouvez pas créer de menus déroulants. C'est pourquoi il s'appelle « Simple ».

D'autre part, l'option « Menu WordPress » ne vous permet pas de gérer les éléments de menu directement depuis l'éditeur SeedProd. Vous devez le faire dans l'éditeur de menu.

La bonne nouvelle est que si votre menu préexistant est un menu déroulant, vous pouvez l'afficher en utilisant cette méthode.

Quelle que soit la méthode que vous choisissez, vous pouvez personnaliser la taille de la police et l'espacement entre les éléments du menu, ajouter un séparateur de texte ou ajuster l'alignement.

Choisir l'option Menu WordPress dans SeedProd

L'onglet « Avancé » offre encore plus d'options de personnalisation.

Vous pouvez modifier la disposition de la liste de l'horizontale à la verticale, ajuster la typographie, modifier les couleurs du texte et du survol, et même ajouter des ombres au texte.

Passage à l'onglet Avancé dans SeedProd

Si vous faites défiler vers le bas, vous pouvez contrôler le remplissage et les marges pour les ordinateurs de bureau, les tablettes et les appareils mobiles.

De cette façon, votre menu est facile à naviguer sur n'importe quelle taille d'écran.

Configuration du remplissage et des marges du menu pour mobile dans SeedProd

Vous voulez que votre menu se démarque ?

SeedProd vous permet d'ajouter des animations pour une expérience utilisateur plus engageante. Vous pouvez lire notre guide étape par étape sur comment ajouter facilement des animations CSS dans WordPress pour plus d'informations.

Ajout d'effets d'animation dans SeedProd

Si vous souhaitez ajouter un nouveau bouton d'appel à l'action dans votre barre de navigation, vous pouvez utiliser le bloc Bouton de SeedProd.

Ouvrez simplement le chercheur de blocs dans la barre latérale gauche et trouvez le bloc Bouton dans la barre latérale gauche.

Ajout d'un bouton dans SeedProd

Ensuite, faites glisser le bloc n'importe où dans votre en-tête.

Une fois terminé, personnalisez simplement l'appel à l'action du bouton, le lien, le style et d'autres paramètres.

Modification du modèle de bouton dans SeedProd

Vous pouvez également créer un menu fixe qui reste en haut de la page lorsque l'utilisateur fait défiler vers le bas. De cette façon, il n'aura pas à remonter à chaque fois qu'il voudra aller sur une autre page.

Pour ce faire, survolez simplement la section jusqu'à ce qu'une ligne violette apparaisse, puis cliquez sur l'icône d'engrenage « Paramètres ».

Cliquer sur Paramètres de section dans SeedProd

Maintenant, basculez vers l'onglet « Avancé ».

Ensuite, faites défiler vers le bas jusqu'au menu « Position ».

Sélection de l'onglet Position dans le menu Avancé dans SeedProd

Ici, choisissez « Fixe ».

Après cela, ajoutez un zéro au décalage supérieur et un nombre z-index élevé (comme 999). Ceci est pour vous assurer que l'en-tête apparaît toujours juste au-dessus de la page.

Création d'un en-tête fixe dans SeedProd

Une fois que vous êtes satisfait de votre menu de navigation personnalisé, cliquez sur le bouton « Enregistrer ».

Étape 4 : Publier votre thème WordPress personnalisé

À ce stade, vous êtes prêt à utiliser votre nouveau thème WordPress personnalisé. Pour l'activer, retournez à la page « Theme Builder » et activez le bouton « Enable SeedProd Theme ».

Activation du thème SeedProd dans WordPress

Tout ce que vous avez à faire maintenant est de consulter votre site web et de découvrir votre nouveau menu de navigation personnalisé.

Voici à quoi ressemble notre menu de navigation sur notre site de démonstration :

Exemple de menu de navigation créé avec SeedProd

Méthode 4 : Personnaliser votre menu de navigation avec l'éditeur CSS visuel (Plus personnalisable)

Cette méthode offre plus d'options de personnalisation que les fonctionnalités intégrées de WordPress, mais elle n'est pas aussi flexible que l'utilisation d'un plugin de constructeur de pages. Cela dit, c'est une excellente solution si vous souhaitez apporter quelques modifications de conception à votre menu de navigation sans remplacer complètement votre thème.

Cette méthode est également une bonne alternative pour ceux qui utilisent des thèmes classiques manquant d'options de style mais qui ne sont pas à l'aise avec l'édition CSS de la méthode 2.

Ici, nous vous guiderons dans l'utilisation d'un plugin premium d'éditeur CSS visuel WordPress appelé CSS Hero. Il vous permet de concevoir visuellement votre site web sans écrire de code. Aucune connaissance HTML ou CSS n'est requise.

Remarque : Consultez notre avis sur CSS Hero pour en savoir plus sur ses fonctionnalités. Les utilisateurs de WPBeginner peuvent également économiser jusqu'à 34 % sur CSS Hero avec notre code promo exclusif.

Tout d'abord, installez le plugin CSS Hero dans WordPress. Vous pouvez consulter notre guide sur comment installer un plugin WordPress pour plus d'informations.

Une fois que vous avez activé le plugin CSS Hero, vous verrez un nouveau bouton appelé « CSS Hero » dans votre barre d'outils d'administration WordPress. Cliquez sur ce bouton pour lancer l'éditeur visuel.

Ouverture de CSS Hero dans WordPress

CSS Hero utilise une interface WYSIWYG. Cliquer sur le bouton ouvrira votre site web à côté du panneau CSS Hero sur le côté gauche de votre écran.

Pour modifier votre menu de navigation, vous pouvez y passer la souris. CSS Hero le mettra alors en surbrillance avec une bordure. Cliquez sur la zone mise en surbrillance pour commencer à personnaliser le menu.

Cliquer sur le menu de navigation dans CSS Hero

CSS Hero vous permet de modifier divers aspects du conteneur de votre menu de navigation, y compris l'arrière-plan, la typographie, les bordures, l'espacement, les listes et même des effets supplémentaires.

Par exemple, disons que vous souhaitez modifier la couleur d'arrière-plan du menu. Cliquer sur « Arrière-plan » ouvrira une interface conviviale où vous pourrez choisir une nouvelle couleur, un dégradé ou une image.

Au fur et à mesure que vous apportez des modifications, vous les verrez reflétées en direct dans l'aperçu du site Web sur la droite.

Modification de la couleur d'arrière-plan du menu dans CSS Hero

Ou, vous pouvez ajouter une ombre portée à vos éléments de menu pour les rendre plus accrocheurs.

Pour ce faire, accédez à l'onglet « Extra ».

Ouverture de l'onglet Extra dans CSS Hero

Ensuite, cliquez sur « Créer une ombre ».

Ici, vous pourrez modifier les paramètres de l'ombre.

Cliquer sur Créer une ombre dans CSS Hero

Maintenant, vous pouvez simplement jouer avec l'apparence de l'ombre.

N'hésitez pas à faire glisser l'orientation, la qualité du flou et de l'étalement, ainsi que la position de l'ombre.

Créer un effet d'ombre dans CSS Hero

Vous pouvez changer tout ce que vous voulez avec l'interface de CSS Hero, afin de pouvoir expérimenter pour trouver ce qui convient le mieux à votre site.

Astuce de pro : Si vous avez suivi les étapes de la méthode 2 pour ajouter des classes CSS à vos éléments de menu individuels, vous pouvez également utiliser CSS Hero pour cibler et personnaliser ces éléments de menu spécifiques pour un contrôle encore plus granulaire de l'apparence de votre menu de navigation.

Une fois que vous êtes satisfait de votre menu personnalisé, cliquez sur le bouton « Enregistrer » pour stocker vos modifications.

Sauvegarde des modifications dans CSS Hero

Vous pouvez lire ces guides pour en savoir plus sur ce que vous pouvez faire avec CSS Hero :

Méthode 5 : Personnalisez votre menu de navigation avec du code (avancé)

Cette méthode convient mieux aux utilisateurs à l'aise avec le code. Elle vous permet également de créer un menu personnalisé si votre thème n'en inclut pas un par défaut.

L'ajout d'extraits de code personnalisés peut sembler intimidant au début, car il implique la modification de fichiers de thème tels que functions.php et header.php. Cependant, il existe des moyens de le faciliter.

Nous recommandons d'utiliser un plugin appelé WPCode. Il offre un moyen sûr et convivial d'ajouter du code personnalisé à votre site WordPress sans modifier les fichiers principaux.

Notre guide sur comment ajouter un menu de navigation personnalisé dans les thèmes WordPress peut vous guider à travers les étapes pour créer un menu avec WPCode.

Insertion d'un menu de navigation personnalisé à l'aide du plugin WPCode WordPress

Une fois que vous avez créé le menu, vous pouvez explorer ces tutoriels.

Chacun inclut une méthode pour personnaliser le menu à l'aide de WPCode.

Guides ultimes pour personnaliser le menu de navigation WordPress

Maintenant que vous avez exploré les bases de la personnalisation de votre menu de navigation WordPress, voici d'autres guides que vous pouvez lire pour faire passer votre menu au niveau supérieur :

Nous espérons que cet article vous a aidé à apprendre comment styliser les menus de navigation WordPress. Vous voudrez peut-être aussi consulter notre guide ultime des éléments de conception WordPress et notre guide pour débutants sur la création d'une page personnalisée dans WordPress.

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.

Avis : Notre contenu est financé par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons percevoir une commission. Voir comment WPBeginner est financé, pourquoi c'est important et comment vous pouvez nous soutenir. Voici notre processus éditorial.

La boîte à outils WordPress ultime

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tout professionnel devrait posséder !

Interactions des lecteurs

73 CommentsLeave a Reply

  1. L'option « Menu » a disparu sous mon option de menu « Apparence » > y a-t-il un autre moyen de voir le conteneur CSS de mon menu et de ses options ?

    Merci !

  2. Bonjour, j'ai besoin d'un conseil, s'il vous plaît :

    J'ai réussi à ajouter du CSS pour que l'un de mes éléments de menu ait une couleur différente. Cependant, lorsque je fais défiler vers le bas, mon menu principal de navigation fixe descend avec moi, et la couleur modifiée de cet élément revient à son état d'origine – Comment conserver la nouvelle couleur de cet élément même lorsque je fais défiler vers le bas ?

    Merci !

  3. Bonjour,

    Je veux augmenter la taille de la police du menu. Comment puis-je faire cela ?
    Si c'est la taille par défaut, comment puis-je la personnaliser ?

    Montrez-moi une méthode simple pour augmenter la taille de la police du menu

    • Cela dépendrait de la méthode que vous comptez utiliser dans cet article. Par exemple, si vous utilisez la méthode CSS, vous utiliseriez l'outil d'inspection de la même manière que dans les exemples de la méthode 2 et modifieriez la taille de la police.

      Admin

  4. Comment avez-vous créé le menu pour ce site ?
    avez-vous dû modifier les fichiers du thème ?
    merci

  5. Je souhaite créer un menu sur la page de la boutique de mon site WooCommerce, horizontalement, qui contienne toutes les catégories de produits vendus. Comment puis-je faire, s'il vous plaît ? Merci d'avance pour votre aide.

  6. Bien que ce fût une tâche ardue, après avoir lu cet article, il est très simple de personnaliser les menus de navigation.
    Merci.

  7. Je suis très novice dans ce domaine et je crée un site sur WP en utilisant le thème Oceanwp. J'ai fait ce que vous avez suggéré en cliquant sur CCS depuis le menu. J'essaie de supprimer la flèche de mon menu déroulant et rien de ce que j'essaie ne fonctionne pour la supprimer.

    Je vous remercie d'avance pour toute aide.

  8. Monsieur, quel thème utilisez-vous. Je démarre un blog WordPress, je veux un blog avec une mise en page simple pour mon usage éducatif.

  9. Salut, qu'en est-il du code HTML ?
    Je veux ajouter un en-tête aux menus imbriqués. Mais je ne sais pas où ni comment le mettre.

    • Bonjour,

      Je voudrais changer l'apparence uniquement du menu que j'ai ajouté pour ma page de vente. Je voudrais changer la hauteur et ajouter un logo.

      Je ne suis pas un professionnel et j'ai essayé certaines choses pour voir si quelque chose changeait dans le menu, mais ça ne change rien. Voici ce que j'ai essayé :

      #Salespage-menu { background:#2194af; height:40px; }

      Pouvez-vous s'il vous plaît m'aider ?

      Merci beaucoup pour vos efforts !

  10. Salut les gars,

    J'ai un problème avec mon menu de navigation pour lequel j'apprécierais vraiment de l'aide s'il vous plaît... Le menu principal est parfait, le problème vient du sous-menu qui se déroule avec un grand espace d'environ 100px ou plus entre lui et le parent au-dessus.

    Lorsque j'essaie de naviguer vers le sous-menu, il disparaît simplement de la vue.

    J'ai essayé tout ce à quoi je pouvais penser jusqu'à présent pour le déplacer directement sous le menu parent afin qu'il reste ouvert et cliquable, mais j'ai échoué jusqu'à présent.

    Voici le CSS personnalisé utilisé pour le thème Point :

    #logo {
    margin: 0;
    }
    .site-branding {
    padding: 0;
    }

    .post-info { display: none; }

    #navigation ul li a { min-height: 22px; padding: 5px 10px 5px 10px; }

    .post-date { display: none; }

    Merci et cordialement.

    • Salut Eugene,

      Nous ne sommes pas sûrs de la cause de ce problème. Cela dépend du CSS et de la mise en page de votre thème et des classes qu'ils ont utilisées. Vous pouvez essayer ce CSS personnalisé :

      .primary-navigation li ul {
      margin:0px;
      padding:0px; 
      } 
      

      Admin

      • Je suis désolé de dire que cela n'a pas non plus fonctionné...

        Merci d'avoir essayé, il semble qu'un nouveau thème soit requis.

        Cordialement.

  11. Bonjour.

    Le plugin fonctionne-t-il même si le thème acheté a sa propre conception de menu ? Merci

  12. si vous voulez utiliser bootstrap, il suffit d'ajouter les classes css de votre propre avec une simple ligne de code dans votre header.php

    ‘primary’, ‘container’ => ‘div’, ‘container_class’ => ‘collapse navbar-collapse’, ‘menu_class’ => ‘nav navbar-nav pull-right’, ‘menu_id’ => ‘primary-menu’ ) ); ?>

  13. Ouai... un autre PLUGIN que vous partagez comment utiliser un PLUGIN tellement, pas vraiment utiliser wordpress... excellent travail

    • Salut Dhany,

      Merci pour vos commentaires. Chez WPBeginner, notre public cible est principalement composé d'utilisateurs débutants. La plupart d'entre eux ne connaissent pas le CSS, le HTML, le PHP, etc. Les plugins leur permettent de faire les choses plus facilement sans casser leurs sites Web.

      Admin

    • Dude…it says ‘beginner’ in the URL. :)

      De plus... ils ont proposé une option manuelle à mi-chemin.

  14. Salut ! J'ai désespérément besoin d'aide avec mon menu sur le site utilisant le thème Baskerville. Avec la dernière mise à jour, le menu est devenu complètement fou ! S'il vous plaît, AIDEZ-MOI !

    Malin

  15. Cela m'a beaucoup aidé lorsque j'essayais de comprendre comment faire fonctionner mes styles d'un thème bootstrap dans WordPress. Merci

  16. Beau post ici,

    Cependant, comment peut-on cibler un élément particulier dans la liste. J'ai en fait trouvé une solution de contournement pour le moment, mais je voudrais cibler cet élément de menu particulier.

    Par exemple, je veux avoir une couleur de fond différente pour le menu de cet élément particulier. Comment cela peut-il être fait ?

  17. Bonjour à tous, je suis nouveau dans le codage, s'il vous plaît, j'ai besoin d'une vraie aide ici. J'ai un site WordPress et le thème de mon site est Baskerville, ce thème ne prend en charge qu'un seul menu. J'essaie de créer des menus de navigation pour mes pages curieuses, s'il y a un code pour faire cela, s'il vous plaît où puis-je le placer, s'il vous plaît, j'apprécierais beaucoup une réponse, merci.

  18. Je perds mon menu css dans wordpress mais les menus déroulants ne s'affichent pas, aidez-moi svp

    merciiiiiii

  19. Bonjour wpbeginner, jolis tutos !

    J'utilise le thème vantage, j'ai déjà mis une classe personnalisée dans l'un de mes menus = ".menu-about", mais quand je le stylise dans stylesheet.css, il n'est pas du tout applicable, avez-vous une suggestion ?

    merci !

  20. J'utilise le thème twenty Twelve. J'ai déjà modifié mon menu avec différentes couleurs. Mais je ne peux pas déplacer la position du menu de navigation dans l'en-tête, il y a trop d'espace en bas par rapport à la ligne de base de l'en-tête. Je veux qu'il touche le bas de l'en-tête.

  21. Bonjour,

    J'ai créé un menu principal dans l'en-tête et un menu de pied de page en utilisant le codex de WordPress. Maintenant, mes deux menus sont disposés verticalement sur ma page. Comment les coder pour des menus horizontaux ?
    S'il vous plaît, aidez-moi, c'est vraiment urgent !
    Merci d'avance

  22. Je tuerais pour une infographie expliquant ce que toutes ces classes modifient réellement. Par exemple :

    .current-page-ancestor
    .current-menu-parent
    .current_menu_parent
    .current-page-parent
    .current_page_parent
    .current-menu-ancestor

    et quelle est la différence entre les tirets/soulignements comme dans .current-menu-parent vs .current_menu_parent

    je t'en ferai un si tu me l'expliques !
    merci…

  23. salut je veux demander une chose très importante
    Comme la barre affichée dans la barre de navigation de votre site web pour le lien Blog montre 8 liens lorsque nous déplaçons notre curseur dessus… maintenant, mon site affiche également de la même manière mais je veux qu'ils soient affichés de telle sorte que lorsque je déplacerai mon curseur dessus, il affichera les 8 liens côte à côte, c'est-à-dire 4-4…… S'il vous plaît monsieur, j'en ai grandement besoin… s'il vous plaît répondez-moi dès que possible…

    • Habituellement, les menus sont organisés en listes non ordonnées ul. Lorsque vous avez une sous-navigation ou des menus déroulants, alors ce sont leurs propres listes non ordonnées à l'intérieur d'un élément de liste. Donc, un exemple de classe CSS que vous modifieriez serait comme ceci :

      ul.menu li ul{width: 220px;}
      ul.menu li li{float: left; width: 100px;}

      Maintenant, cela définirait chaque élément de liste de deuxième niveau pour avoir une largeur exacte et flotter à gauche.

      Admin

  24. Excellent article, merci.

    Je ne savais pas pour cette fonctionnalité de classe CSS, au moins je le sais maintenant.

    Cela va vraiment me bénéficier.

    Merci.

  25. This is very helpful. Prior to this, I had understanding that we can’t add custom classes in wordpress from admin and I always used to do it in functions.php, but this is awsome. These people are rockers. And many thanks to Sayed for this helpful post :)

  26. great tutorial!! but how do i do something as simple as change the font size? what do i enter in to change the font size? thank you! :)

  27. @mriulian Regardez le tutoriel ci-dessus... les classes pour les pages actuelles sont déjà définies...

    Dans le code d'en-tête, vous devez définir l'ID du conteneur du menu et la classe du conteneur... suivez l'article comme il le dit, et cela fonctionnera.

  28. J'essaie juste d'être plus clair, voici mon code :

    // dans la fonction page

    if (function_exists(‘register_nav_menus’)) { register_nav_menus( array( ‘mainNav’ ) ); }

    // dans la page d'en-tête

    ‘main_nav_menu’)); ?>

    // dans le fichier css

    .current{ background-color: #0188AA; color: #fff; text-decoration: none; }

    Comment puis-je appliquer cette classe à ma navigation ? (très facile sur une page html statique mais apparemment assez compliqué dans WordPress).

    Merci d'avance

  29. C'est ce que j'ai fait mais ça ne fonctionne pas. J'ai enregistré mon menu dans la page des fonctions puis je l'ai appelé depuis la page d'en-tête comme ma navigation principale. Maintenant, j'ai une classe .current dans ma feuille de style à appliquer à la page actuelle mais il n'est pas évident de savoir comment faire. Pouvez-vous m'aider avec une suggestion ?

  30. La façon dont fonctionnent les menus de navigation WordPress, il saura automatiquement quelle page est la page actuelle..

  31. Merci d'avoir mentionné les classes CSS dans le panneau des options d'écran. Le problème que j'ai avec ma navigation est comment styliser le menu de navigation afin que chaque élément de menu obtienne une couleur de fond spécifique lorsque vous arrivez sur une certaine page. Vous mentionnez la création d'une classe telle que .current_page_item{} dans votre feuille de style. Mais comment appliquer cette classe dans le header.php ?

  32. Où puis-je obtenir des informations plus détaillées sur la façon d'ajouter des icônes aux noms des menus. Quel est un très bon guide CSS pour faire beaucoup de ces choses que vous avez décrites ici ?

    Merci

    • CSS-Tricks est un bon forum, mais vous devriez probablement consulter des livres sur le CSS pour débutants pour apprendre le CSS. Parce que tout ce que vous faites, c'est ajouter une image d'arrière-plan.

      Admin

  33. Hello. I absolutely loved this post and found it very useful, particularly the option to set individual CSS classes, so many thanks for this information.
    What I was wondering is if it would be possible to dynamically assign CSS classes from the php wp_nav_menu function call to certain types of elements, for instance, to parent menu items only. That way, you wouldn’t have to manually add that class in the Menu Screen every time a new type element (in the example, a new parent item) is created.
    Any thoughts on that would be greatly appreciated, :-)

  34. bon article.

    Je veux changer la sortie de wp_nav_menu().
    Je n'aime pas le HTML généré par wp_nav_menu().
    J'ai mon propre beau HTML pour le menu que je veux.
    Je voulais donc modifier la structure HTML générée par wp_nav_menu().

    est-ce possible ?

    Merci de me conseiller dès que possible.

  35. Salut, merci pour le tutoriel. Ce serait bien si vous pouviez me guider pour avoir le menu de navigation utilisé dans votre thème. J'aimerais avoir un menu déroulant comme le vôtre. Merci !

    • Le menu de navigation par défaut de WordPress vous permet d'avoir des menus déroulants. Il suffit de les faire glisser un peu à droite de l'élément principal, et c'est possible. Si vous utilisez un framework comme Genesis, il dispose déjà de l'option Fancy Drop down, vous pouvez donc simplement la sélectionner. Ou vous pouvez utiliser des techniques jQuery comme SuperFish pour cela. Nous pourrions ajouter un tutoriel à l'avenir.

      Admin

  36. Vous connaissez votre WordPress.

    Ce n'est pas un tutoriel facile mais bien expliqué et cela ajoute certainement à ma compréhension.

    J'apprécie que vous nous instruisiez.

  37. Je ne suis pas sûr où placer le premier code php wp_nav_menu. Serait-ce dans le fichier functions ou l'en-tête ou... ?

Laisser un commentaire

Merci d'avoir choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.