Véronique demandait sur le groupe facebook Divi Theme France si l’on pouvait modifier la couleur des liens du menu lorsque la souris passait dessus. (il y a d’ailleurs une solution autre que celle que je vous donne ici)
Lorsque vous installez Divi et que vous mettez en place votre menu, vous allez vous rendre compte que lorsque vous passez votre souris sur les éléments de celui-ci, ils deviennent un peu plus clair et translucide (gris clair si vous avez laissé les réglages de base).
Cette couleur c’est malheureusement pas modifiable dans les réglages de Divi et n’est pas forcément en adéquation avec le design de votre site.
Je vais donc vous montrer comment y arriver très simplement.
Aller dans Apparence->Personnaliser->CSS additionnel et copiez-collez le code CSS suivant :
Et c’est tout!
Vous n’avez maintenant plus qu’à remplacer ma couleur par la votre dans ce morceau de code.
Hello,
merci pour ce correctif de couleur.
J’aimerai aussi savoir comment on peut changer la largeur du menu déroulant.
Salut, merci de ton commentaire. On prévoit justement un tuto pour expliquer comment élargir le menu pour éviter que les liens ne s’affichent sur deux lignes. Ça arrive bientôt 😉
Nickel ! Merci 🙂
Bonjour !
Merci pour ces tutos trés utiles.
Peut etre pourrais tu m’aider…
Je cherche a mettre un background à mon menu principal Divi, je parle d’une barre sous les liens du menu et pas de toute l’entete et le logo.
Merci pour ton aide !
Noémie de martinique
Bonjour, tu veux mettre une couleur derrière tes intitulés ou les souligner?
Bonjour Noémie, je t’invite à venir poser cette question sur le groupe Facebook de Divi Community où nous serons plus à l’aise pour y répondre, en discuter et échanger avec d’autres membres. 🙂
Bonjour,
Avez-vous déjà rencontrer le problème suivant : dans le module Divi Menu standard la personnalisation de la couleur du lien actif ne fonctionne pas …
Merci pour votre aide
Bonjour, as-tu essayé de vider ton cache après l’avoir modifié?
Oui, et j’ai même aussi testé dans différents navigateurs
Tous les jours je trouve quelque chose chez vous 😉 Alors à nouveau : top, merci !
merci pour ce tuto
il fonctionne parfaitement sauf quand je passe en mode tablette ou smartphone je perd mes couleurs que j’ai définis et passe en couleur par défaut divi
merci
Bonjour, c’est parce que le menu mobile n’utilise pas les mêmes classes CSS que le menu classique. Il faut donc les cibler à nouveau sur téléphone.
Bonjour à tous,
Je débute complètement donc question peut être bête, dois-je copier la totalité de l’écran à savoir
/*COULEURS ÉLÉMENTS MENU AU PASSAGE DE LA SOURIS (HOVER)*/
#top-menu-nav #top-menu a:hover,
#mobile_menu_slide a:hover {
/*la couleur que vous souhaitez afficher*/
color: #cc692f !important;
/* l’opacité (entre 0 et 1). Ici on supprime l’effet translucide d’origine en mettant 1*/
opacity:1 !important;
}
?? Merci !
Et une autre question, une fois le tout copié et posté (tout fonctionne, merci), ou puis-je retrouver ce code pour modifier la couleur?
Encore merci 🙂
Bonjour, si tu veux modifier la couleur il faut la définir ici: /*la couleur que vous souhaitez afficher*/
color: #cc692f !important;
Donc je peux indéfiniment copier – coller les codes CSS dans Apparence->Personnaliser->CSS additionnel ? ça ne risque pas d’endommager la structure du code?
Si j’ai collé un mauvais code dans CSS additionnel et que j’ai publié, st-ce grave ou dois-je retrouver ce code et le supprimer?
Merci 🙂
Bonjour et merci pour ce tuto très pratique!
Par souci de visibilité et contrainte due à la couleur de mon logo, ma barre primaire est sur fond blanc, puis en scrollant vers le bas, je fais disparaître le logo et la barre devient bleue.
Comment faire pour appliquer une couleur différente au survol, selon que le survol s’effectue lorsque l’internaute se trouve tout en haut de la page (et que la barre primaire est blanche) ou plus bas dans la page (et que la barre primaire est bleue)?
Merci pour votre réponse qui aidera probablement d’autres personnes dans mon cas ^^
Bonjour, lorsque tu scrolles le menu change de classe CSS et d’identifiant. En gros il y a “deux menus” et du coup il faut aussi assigner ces modifications à cette classe CSS.
Bonjour et merci pour le tuto.
Si je colle ce code dans mon style.css de mon theme enfant, cela ne fonctionne pas… Pourquoi ?
Merci d’avance
Bonjour Eric, difficile à dire comme ça. Tu es sur de l’voir bien collé et d’avoir assigné une couleur? As-tu vidé ton cache pour que les modifications soient prises en compte?
Bonjour, savez vous comment appliquer ces paramètres au footer ?
Merci d’avance !
Si tu as créé ton footer avec le Theme Builder et inséré un module “menu”, il te suffit de lui attribuer un identifiant CSS pour le cibler.
Ce qui donnerait
#ton-menu a:hover {
etc.