Voulez-vous concevoir vos menus de navigation WordPress pour changer leurs couleurs ou leur apparence? Alors que votre thème WordPress gère l’apparence de vos menus de navigation, vous pouvez facilement le personnaliser en utilisant CSS pour répondre à vos besoins. Dans cet article, nous vous montrerons comment concevoir des menus de navigation WordPress sur votre site.
Nous allons 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 du code CSS au lieu d’un plugin.
Méthode 1: concevoir des menus de navigation WordPress à l’aide d’un plugin
Votre thème WordPress utilise CSS pour concevoir des menus de navigation. De nombreux débutants ne sont pas à l’aise pour éditer des 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. Il vous évite de modifier des fichiers de thème ou d’écrire n’importe quel 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 concevoir 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.
Lors de 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 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 CSS Hero flottante 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 votre menu de navigation et CSS Hero la mettra en surbrillance en affichant les bordures autour d’elle. Lorsque vous cliquez sur le menu de navigation en surbrillance, il vous montrera les éléments que vous pouvez modifier.
Dans la capture d’écran ci-dessus, il nous montre le conteneur du menu de navigation supérieur. Supposons que nous voulions 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 de notre menu.
CSS Hero vous montrera maintenant différentes propriétés que vous pouvez modifier comme 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 d’arrière-plan, 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.
Une fois que 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 toutes les modifications que vous apportez. 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).
Habituellement, si vous utilisez la balise de menu par défaut de WordPress, il affichera une liste sans classes CSS associées.
Votre liste non ordonnée aurait le nom de classe “menu” avec chaque élément de liste ayant sa propre classe CSS.
Cela pourrait 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 par défaut peut provoquer des conflits avec les menus d’autres emplacements.
C’est pourquoi vous devez également définir la classe CSS et l’emplacement du menu. Il y a de fortes chances que votre thème WordPress le fasse déjà en ajoutant les menus de navigation en utilisant un code comme celui-ci:
