Problema con estilos CSS

Hola a todos.

Veréis, me gustaría que la barra que subraya a los elementos del menú del header cuando se pasa el ratón por encima de ellos, se quedará subrayando permanentemente a la categoría que se seleccione, es decir la que esté :active

Pero no encuentro el código CSS correcto para lograrlo. El subrayado no es el que crea text-decoration:underline sino que está hecho con :after

¿Alguien me echa un cable? La web es:

pla ne ta otc DOT com


Muchas gracias

Un saludo!
Eso lo tienes que hacer en servidor, es decir, cuando entres en dicha categoría que añada una class al elemento de menú correspondiente.

Para hacerlo en cliente la única forma que se me ocurre (chapucera) es mediante javascript leer la ruta de la URL y mediante un switch añadir la class correspondiente
tojeiro escribió:Eso lo tienes que hacer en servidor, es decir, cuando entres en dicha categoría que añada una class al elemento de menú correspondiente.

Para hacerlo en cliente la única forma que se me ocurre (chapucera) es mediante javascript leer la ruta de la URL y mediante un switch añadir la class correspondiente


Bootstrap en tu menú no usa nada en el lado del servidor para eso. Con JavaScript se hace perfectamente.

Así rápidamente se me ocurre que al cargar la web compruebas la URL de la web y si coincide con el atributo href del menú, le añades la clase active.
Parece que los menús de wordpress añaden una clase "current_page_item" al item de la pagina actual, así que con este código CSS se puede conseguir sin problemas, por si a alguien le puede servir:

.current-menu-item .w-nav-title:after {
opacity: 1 !important;
bottom: -2px !important;
}
3 respuestas