skip to Main Content

Comment donner du style à vos menus de navigation

Divi : le thème WordPress le plus facile à utiliser

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Souhaitez-vous personnaliser vos menus de navigation WordPress pour changer leurs couleurs ou leur apparence? Votre thème WordPress gère l’apparence des menus de navigation sur votre site. Vous pouvez facilement le personnaliser en utilisant le CSS pour répondre à vos exigences. Dans ce tutoriel, nous allons vous montrer comment donner du style aux menus de navigation de votre blog WordPress.

donner-du-style-aux-menus-de-navigation-de-wordpress

Méthode 1 : Comment donner du style à vos menus WordPress à l’aide d‘un plugin

Votre thème WordPress utilise du CSS pour vos styles de navigation. Beaucoup de débutants ne sont pas à l’aise avec l’édition CSS des thèmes WordPress. C’est donc à ce moment qu’un plugin pour styler un menu devient pratique, car Il vous évite d’éditer des fichiers du thème ou de l’écriture de code.

D’abord, ce que vous devez 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 (Pas HTML ou CSS requis).

Après l’activation du plugin, vous serez redirigé vers une page où vous devrez fournir votre licence. Il suffit de suivre les instructions à l’écran, et vous serez redirigé vers votre site en quelques clics.

Maintenant, vous devez cliquer sur le bouton « Hero CSS » sur votre barre d’outils de WordPress.

css-hero-menu-wordpress

CSS Hero offre un éditeur WYSIWYG (ce que vous voyez c’est ce que vous obtenez « What You See Is What You Get »). En cliquant sur ce bouton vous accéderez à votre site Web avec une barre d’outils flottante CSS Hero sur la droite.

barre-doutils-css-hero

Vous devez cliquer sur l’icône bleue en haut pour commencer l’édition.

Déplacez votre souris sur votre menu de navigation et CSS Hero le mettra en évidence en affichant ses frontières. Lorsque vous cliquez sur le menu de navigation en surbrillance, il vous affichera les différents éléments que vous pouvez modifier.

personnaliser-un-menu-avec-css-hero

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Dans la capture d’écran ci-dessus, Vous pouvez voir l’élément du menu, le menu de navigation, et le conteneur du menu de navigation, etc.

Supposons que nous souhaitons changer la couleur du texte de tous les éléments sur le menu de navigation. Dans ce cas, nous allons sélectionner le menu de navigation qui touche le menu entier.

CSS Hero va maintenant vous présenter les différentes propriétés que vous pouvez modifier comme le texte, la couleur de fond, les bordures, les marges, le rembourrage, etc.

propriete-css-hero

Vous pouvez cliquer sur une propriété que vous souhaitez modifier. CSS Hero vous présentera une interface simple où vous pouvez effectuer vos modifications.

modifier-une-propriete-css-avec-css-hero

Dans la capture d’écran ci-dessus, nous avons sélectionné le texte, et il nous a montré une belle interface pour sélectionner les polices, changer la couleur du texte, la taille, et d’autres propriétés.

Au fur et à mesure que vous apporterez des modifications, vous aurez un aperçu en direct du résultat final.

previsualisation-en-direct-css-hero

Une fois que vous êtes satisfait des modifications, cliquez sur le bouton « Enregistrer » sur dans la barre d’outils « Hero CSS » pour enregistrer vos modifications.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

La meilleure partie avec cette méthode est que vous pouvez facilement annuler les modifications que vous apportez. CSS Hero conserve un historique complet de tous vos changements, et vous pouvez aller et venir entre ces changements.

Deuxième méthode : Comment modifier manuellement le style de votre menu de navigation

Cette méthode vous oblige à modifier les fichiers de votre thème WordPress. Vous devriez l’utiliser que si vous êtes un développeur et  avez des connaissances en création de thème WordPress.

La meilleure façon de le faire est de personnaliser votre thème WordPress par la création d’un thème enfant. Si vous ne changez que du CSS, alors, je vous invite à lire notre tutoriel sur comment ajouter un code CSS personnalisé sur WordPress.

Les menus de navigation de WordPress sont affichés dans une liste non ordonnée (liste à puces).

Si vous utilisez la balise php suivante, il affichera une liste sans classes CSS qui lui sont associées.

<?php wp_nav_menu(); ?>

Votre liste à puces aurait le «menu» du nom de classe avec chaque élément de liste ayant sa propre classe CSS.

Cela pourrait fonctionner si vous avez un seul emplacement du menu. Cependant, la plupart des thèmes ont plusieurs endroits où vous pouvez afficher des menus de navigation.

Utiliser seulement les classes CSS par défaut peut provoquer des conflits avec des menus sur d’autres endroits.

C’est la raison pour laquelle vous avez besoin de définir la classe CSS et l’emplacement de menu. Il y a des chances que votre thème WordPress soit déjà en train de faire cela en ajoutant les menus de navigation à l’aide du code comme ceci:

<?php
	wp_nav_menu( array(
		'theme_location' => 'primary',
		'menu_class'     => 'primary-menu',
		 ) );
?>

Ce code indique a WordPress que ceci est où le thème affiche le menu principal. Il ajoute également une classe CSS « primary-menu » dans le menu de navigation.

Maintenant, vous trouverez le style de votre menu de navigation en utilisant une structure CSS.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

#header .primary-menu{} // container class
#header .primary-menu ul {} // container class first unordered list
#header .primary-menu ul ul {} //unordered list within an unordered list
#header .primary-menu li {} // each navigation item
#header .primary-menu li a {} // each navigation item anchor
#header .primary-menu li ul {} // unordered list if there is drop down items
#header .primary-menu li li {} // each drop down navigation item
#header .primary-menu li li a {} // each drap down navigation item anchor

Remplacez #header avec la classe de conteneur ou l’ « ID » utilisé par votre thème WordPress.

Cette structure vous aidera à changer complètement l’apparence de votre menu de navigation.

C’est tout pour ce tutoriel. J’espère qu’il vous permettra de personnaliser les menus de votre blog WordPress. N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux préférés.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
3 Partages
Partagez2
Tweetez1
Enregistrer