Changer la couleur d’un onglet du Menu

Tutoriel wordpress couleur onglet du menu

1 – Aller dans Tableau de bord > Menu > en haut à droite de la page > Option de l’écran > Afficher les propriétés avancées du menu cocher : Classes css.

2 – Même page > structure du Menu > dérouler le titre de l’onglet > dans Classes css (facultatives) entrer : enavant et enregistrer.
NB : ce mot peut tout aussi bien appeler highlight ou pomme-de-terre… Si vous décidez de mettre plusieurs onglets en avant, nommez les enavant-1, enavant-2 etc…

3 – Aller dans Tableau de bord > Personnaliser > CSS additionnel (ou avec le plugin: Simple-custom-css ) entrer ce code:

#mainnav ul li.enavant a {color:#f47a00!important;}

Facultatif : Vous pouvez aussi ajouter cet autre bout de code pour spécifier une autre couleur au survol de l’onglet du menu :

#mainnav ul li.enavant a:hover{color:#ff0000!important;}

NB : selon le code du menu #mainnav peut s’appeler différemment (par exemple : #nav_menu ou .navbar-nav etc…).
Adaptez votre code en gardant cette construction : #mainnav ul li.Votre nom de classe a {color:#votreCouleur!important;}
Les couleurs sont à choisir selon votre goût.
NB dans cet exemple le nom de classe est enavant.

Panneau des outils de développement

IMPORTANT : si ce code ne fonctionne pas c’est que vous n’avez pas le bon code du menu : pour cela si vous naviguez avec Goole chrome ou Firefox faites au clavier CTRL+Maj+i (appuyés en même temps).
Le panneau des Outils de développement va s’ouvrir au bas de la page de votre site.
Suivez l’ordre des actions sur l’image Panneau des Outils de développement.
Changez le nom du menu par celui qui est indiqué sur le menu du thème de votre site !
Vous pouvez également faire un test en direct au N°4 en choisissant une autre couleur.