28112 sujets

CSS et mise en forme, CSS3

[Résolu] CSS bouton dans le menu

Bonjour,

Je rencontre depuis plusieurs mois un problème,

Pour ajouter un item a encadré bleu dans notre menu, mon responsable a fait appel a un codeur.

Celui-ci a ajouté ça dans apparence --> personnaliser CSS :
/ Bouton CTA /

.btn-appel-action a {
background-color: #0e2eaf;
border-radius: 20px;
padding:15px 15px !important;
color: #ffffff!important;
}

Seulement, depuis, le texte sur ce fond bleu devient noir si on scrool et je n'arrive pas à le changer.

Voilà le site : https://www.fabien-immobilier.fr/

N'étant pas une professionnelle je ne vois pas comment régler le problème.

Merci d'avance pour votre aide,

Cordialement.
Bonjour,

La première option consisterait à rajouter une règle de style pour surcharger les règles déjà mises en place.

Mais dans votre cas vous pouvez vous contenter de supprimer une classe CSS. Quelque part dans vos styles CSS vous avez ça :
@media only screen and (min-width: 981px) {
 .et-fixed-header #top-menu a,
 .et-fixed-header #et_search_icon:before,
 .et-fixed-header #et_top_search .et-search-form input,
 .et-fixed-header .et_search_form_container input,
 .et-fixed-header .et_close_search_field:after,
 .et-fixed-header #et-top-navigation .et-cart-info {
    color: #000000!important;
  }
}

Il faudrait supprimer cette classe (avec la virgule qui suit) :
.et-fixed-header #top-menu a,

Et ce sera tout bon.
Modifié par Olivier C (24 Apr 2023 - 17:37)
Modérateur
Salut,

Vous pouvez transformer le bout de code 
/* Bouton CTA */
.btn-appel-action a {
background-color: #0e2eaf;
border-radius: 20px;
padding:15px 15px !important;
color: #ffffff!important;
}

en :
/* Bouton CTA */
.btn-appel-action a {
background-color: #0e2eaf;
border-radius: 20px;
padding:15px 15px !important;
color: #ffffff!important;
}
.et-fixed-header #top-menu .btn-appel-action a {
    color: #FFF!important;
}

Attention dans le menu mobile le survol de ce bouton bleu devient tout blanc. Il faut rajouter un petit bout de code à la suite pour changer le hover :

.et-fixed-header #top-menu .btn-appel-action a:hover,
.et-fixed-header #top-menu .btn-appel-action a:focus {
    background-color: #0e2eaf;
}
Meilleure solution
Merci merci beaucoup pour votre aide ! Laurent, votre solution a fonctionné ! Un gros problème de résolu !! Belle journée. Maëlys.
Modérateur
Salut,

Sauf erreur de ma part, le bouton dans le menu mobile s'affiche encore en blanc sur blanc au survol.

Bonne journée
Bonjour Laurent,

Excusez moi, je n'avais pas vu votre dernier message depuis tout ce temps. Effectivement, le bouton s'affiche toujours en blanc au survol. Pourtant il me semble ne rien avoir oublié dans le code que vous m'avez transmis, mais vu que je ne m'y connais pas du tout ...

Je vous met le CSS additionnel en PJ.

Merci d'avance pour votre aide

upload/1688545986-85712-pbcodeadditionnelcss.png
Modifié par fabimmo (05 Jul 2023 - 10:34)
J'ai également un autre problème avec ce bouton sur version ordinateur : le texte du bouton devient bleu lorsque je suis sur la page en question et que je scroll (voir photo), si jamais vous avez également la solution ce serait top !

Merci d'avance,

Belle journée.

upload/1688549913-85712-pbcodeadditionnelcss1.1.png
Prévenir un modérateur
Répondre au sujet
Aller à