Tutoriels

Tuto WP tutoriel wordpress couleur onglet menu

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…

tutoriel wordpress couleur onglet
🔍      Menu ajout de la classe css

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

#mainnav ul li.highlight 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.highlight 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.

Panneau des outils de développement

tutoriel wordpress couleur onglet : panneaud'outils de dévelopement
🔍   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.

IMPORTANT NOTE
Google translations of this site are automatic.
Custom sites are authentic bilingual translations.
See bilingual sites made:
Folly Too Yacht
Beatrice Chauvin photographer
Guitar chords