[HTML/CSS] Bug Header responsive + aide :hover

Bonjour,

Voilà après avoir fait la formation CSS et HTML j'ai essayé de faire un header responsive (malheuresement je range très mal mon code) qui ressemble à ça : https://www.mixofx.com/


Voici mon code html + css : https://codepen.io/akaarl_/pen/abdadvy

Si les images ne marchent pas : https://drive.google.com/drive/folders/1XUv4JOITxuV1U5LJUpgNdfLFIGxou0IA?usp=sharing

J'aimerais avoir de l'aide pour l'animation du texte (quand curseur dessus : hover animation ligne jaune de gauche à droite), m'expliquer le problème des marges entre les textes à droite et essayer de trouver le problème pourquoi le "cart" à droite ne change pas de couleur quand on passe son curseur dessus.
Merci d'avance pour toutes vos réponses, j'ai essayé de faire mon mieux mais je commence à me perdre un peu.
PS : le site est un entraînement pour moi /je ne souhaite que améliorer le header pour l'instant (là où je me perds).
Pour tout ce qui est JavaScript je suis pas très bien calé, je suis toujours en formation, et toujours à l'écoute de tout conseil !
Modifié par Karibouu (14 Jul 2020 - 16:18)

Salut,


Tu as résolu tes problèmes ? Les textes ont un joli hover, le "cart" change bien de couleur et je n'ai pas trop compris le soucis des marges.

J'ai résolu le problème pour l'animation en dessous du texte :

.menu-right li a {
  position: relative;
}
 .menu-right li a:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 2px;
  background-color: yellow;
  width: 0;
  transition: width .2s ease-in-out;
}
 .menu-right li a:hover:after {
  width: 100%;
}

mais j'ai toujours le problème du changement de couleur du cart (il faudrait que le hover soit en rouge) et pour le soucis des marges, c'est juste mettre des espaces entre chaque puce : Home, Store, Contact et About.

J'ai mis mon code à jour tu peux voir ce que ça donne, si tu as besoin de plus d'explications sur mon problème n'hésite pas à me redemander

Voici l'image pour illustrer mes propos (screenshot pris sur " rel="nofollow noopener" >www.mixofx.com)
Modifié par Karibouu (15 Jul 2020 - 14:45)

Du coup....

"Tu peux utiliser un margin pour ça."

Avec plaisir.
Pour info, tu n'es pas obligé de rajouter une classe supplémentaire.
Cet appel fonctionnera aussi: .menu-right li voir même .menu-right > li si tu veux être sûr que ça ne cible que les li de premier niveau (on sait jamais si tu décides d'avoir des sous-menus).