Code CSS pour créer un effet de soulignement au menu, testé sur WordPress FSE uniquement et le thème Spectra One.
/* ----- MENU ----- */
/* Animation soulignement fluide de couleur au survol */
.wp-block-navigation-item__content {
position: relative;
display: inline-block;
padding-bottom: 4px; /* un peu d’espace pour l’animation */
text-decoration: none;
}
.wp-block-navigation-item__content::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 0;
background-color: #790089;
transition: width 0.3s ease-in-out;
}
.wp-block-navigation-item__content:hover::after {
width: 100%;
}
Ajout du mot ‘Fermer’ devant la croix du menu sur tablette et mobile, ainsi qu’un changement de couleur au passage de la souris.
/* ----- BT Fermeture et mot Fermer ----- */
.wp-block-navigation__responsive-container-close {
display: inline-flex; /* Utilise flexbox pour l'alignement */
align-items: center; /* Centre verticalement les éléments */
gap: 8px; /* Ajoute un espace entre le texte et la croix */
}
.wp-block-navigation__responsive-container-close::before {
content: "Fermer";
}
.wp-block-navigation__responsive-container-close:hover {
color: red; /* Change la couleur du texte en rouge au survol */
}
.wp-block-navigation__responsive-container-close:hover svg path {
fill: red; /* Change la couleur de la croix en rouge au survol */
}