Seleccionar página

Este es un tutorial sencillo que sé que te puede ser de mucha ayuda.

Estuve buscando la forma de resaltar el link activo en mi menú principal, pero no encontré la forma sencilla «En el personalizador del tema».
Bueno, era hora de usar un poco de CSS.

¿Qué necesitamos?
– Divi
– Child Theme –> Si no tienes uno Mira nuestro tutorial de ¿Cómo crear un child theme?

 

Color de fondo

Primero es encontrar nuestro Link activo en el inspector de Google Chrome:

 

Y empezamos con nuestro código CSS:

/* Fondo de link activo en el menú */
#main-header #top-menu li.current-menu-item > a {
background-color: White !important;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
-webkit-border-radius: 5px 10px;  /* Borde redondeado – Safari  */
-moz-border-radius: 5px 10px;     /* Borde redondeado – Firefox */
}

Listo, nuestro link activo está resaltado por un fondo blanco con padding en sus diferentes lados y con bordes redondeados.
Cabe aclarar que este código es sólo para Desktop, no funciona en móvi. En un próximo tutorial haremos uno para móvil.

¡Ah, por cierto! En un próximo tutorial también haremos una galería con filtros con el módulo de pestañas y CSS.
Échale un vistazo:

Diseño web

UX/UI

Espero te haya gustado este pequeño tutorial, mira más como estos en https://divicon.net

 

Ha sido un gusto para mi compartir un nuevo tutorial después de tanto tiempo. ¡Un fuerte abrazo!

¿Te parece interesante este artículo?
Puntaje
[Total: 0 Average: 0]

Pin It on Pinterest

Shares