Voulez-vous créer vos menus de navigation WordPress pour changer leurs couleurs ou leur apparence? Alors que le thème WordPress s’occupe de l’apparence des menus de navigation, vous pouvez facilement le personnaliser en utilisant CSS pour répondre à vos besoins. Dans cet article, nous vous montrerons comment créer des menus de navigation WordPress sur votre site Web.
Nous allons vous montrer deux méthodes différentes. La première méthode est destinée aux débutants car elle utilise un plugin et ne nécessite aucune connaissance du code. La deuxième méthode est destinée aux utilisateurs intermédiaires de bricolage qui préfèrent utiliser le code CSS au lieu du plugin.
Méthode 1: concevoir des menus de navigation WordPress à l’aide d’un plugin
Votre thème WordPress utilise CSS pour créer des menus de navigation. De nombreux débutants n’aiment pas modifier les fichiers de thème ou écrire du code CSS par eux-mêmes.
C’est à ce moment qu’un plugin de style WordPress devient pratique. Cela vous empêche de modifier des fichiers de thème ou d’écrire du code.
La première chose à faire est d’installer et d’activer le plugin CSS Hero. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.
CSS Hero est un plugin WordPress premium qui vous permet de créer votre propre thème WordPress sans écrire une seule ligne de code (aucun HTML ou CSS requis). Consultez notre revue CSS Hero pour plus d’informations.
Les utilisateurs de WPBeginner peuvent utiliser ce coupon CSS Hero pour obtenir une remise de 34% sur leur achat.
Après l’activation, vous serez redirigé pour obtenir votre clé de licence CSS Hero. Suivez simplement les instructions à l’écran et vous serez redirigé vers votre site Web en quelques clics.
Ensuite, vous devez cliquer sur le bouton CSS Hero dans la barre d’outils d’administration WordPress.
CSS Hero propose un éditeur WYSIWYG (ce que vous voyez est ce que vous obtenez). En cliquant sur le bouton, vous accéderez à votre site Web avec une barre d’outils flottante CSS Hero visible à l’écran.
Vous devez cliquer sur l’icône bleue en haut pour commencer l’édition.
Après avoir cliqué sur l’icône bleue, déplacez votre souris vers le menu de navigation et CSS Hero la mettra en surbrillance en montrant les bords autour d’elle. Lorsque vous cliquez sur le menu de navigation en surbrillance, il affiche les éléments que vous pouvez modifier.
Dans la capture d’écran ci-dessus, il montre le conteneur dans le menu de navigation supérieur. Supposons que nous voulons changer la couleur d’arrière-plan de notre menu de navigation. Dans ce cas, nous sélectionnerons la navigation supérieure qui affecte l’ensemble du menu.
CSS Hero affichera désormais différentes propriétés que vous pouvez modifier, telles que le texte, l’arrière-plan, la bordure, les marges, le remplissage, etc.
Vous pouvez cliquer sur n’importe quelle propriété que vous souhaitez modifier. CSS Hero vous montrera une interface simple où vous pourrez effectuer vos modifications.
Dans la capture d’écran ci-dessus, nous avons sélectionné l’arrière-plan et cela nous a montré une belle interface pour sélectionner la couleur, le dégradé, l’image et plus encore.
Lorsque vous apportez des modifications, vous pouvez les voir en direct dans l’aperçu du thème.
Lorsque vous êtes satisfait des modifications, cliquez sur le bouton Enregistrer de la barre d’outils CSS Hero pour enregistrer les modifications.
La meilleure chose à propos de l’utilisation de cette méthode est que vous pouvez facilement annuler vos modifications. CSS Hero conserve un historique complet de toutes vos modifications et peut aller et venir entre ces modifications.
Méthode 2: concevoir manuellement des menus de navigation WordPress
Cette méthode nécessite que vous ajoutiez manuellement du CSS personnalisé et est destinée aux utilisateurs intermédiaires.
Les menus de navigation WordPress sont affichés dans une liste non ordonnée (liste à puces).
En général, si vous utilisez la balise de menu WordPress standard, elle affichera une liste sans classes CSS associées.
Votre liste non ordonnée aurait le nom de classe «menu», chaque élément de la liste ayant sa propre classe CSS.
Cela peut fonctionner si vous n’avez qu’un seul emplacement de menu. Cependant, la plupart des thèmes ont plusieurs emplacements où vous pouvez afficher les menus de navigation.
L’utilisation de la classe CSS standard peut provoquer des conflits avec les menus dans d’autres emplacements.
C’est pourquoi vous devez également définir la classe CSS et l’emplacement du menu. Votre thème WordPress le fait probablement déjà en ajoutant des menus de navigation en utilisant un code comme celui-ci:
