Cómo destacar un elemento del menú con CSS

En ocasiones querrás destacar un elemento en concreto de un menú de tu web, ya sea mostrándolo con un color de fondo distinto, otro color del texto, etc.

Esto lo haremos aplicando algo de CSS a ese elemento del menú, y en esta ocasión lo haré con el tema Astra activo, ya que es el tema WordPress más descargado, pero la técnica vale para cualquier tema WordPress.

Vamos a verlo paso a paso, verás qué fácil es.

Mostrar propiedades avanzadas de los menús

Antes de empezar lo primero es asegurarnos de que se mostrarán las propiedades avanzadas en los menús, pues por defecto no vienen activas todas en WordPress.

Para ello iremos al personalizador (Apariencia > Personalizar) y, en la sección de menús, haremos clic en el icono de la rueda de la parte superior derecha para mostrarlas.

Una vez tengamos a la vista las propiedades avanzadas que podemos mostrar activaremos, al menos, la de clases CSS, que es la que vamos a utilizar.

Añadir una clase personalizada al menú que queremos destacar

Activada la propiedad avanzada de clases CSS en los menús ya podemos editar nuestro menú y, en desplegando el elemento que queremos destacar, comprobaremos que hay una caja llamada «Clases CSS».

Una vez identificada le añadiremos una clase nueva, que llamaremos destacar-menu, y publicamos los cambios.

Crear los estilos de la clase CSS personalizada

Ahora solo nos queda crear esta clase que hemos definido, aplicándole estilos a nuestro gusto.

Para ello, sin salir del personalizador, iremos a la sección de «CSS adicional».

Una vez ahí podemos empezar a aplicar estilo a nuestro menú destacado. Un ejemplo sería este:

/* Destacar menú */
.destacar-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Que se vería inmediatamente aplicado en la vista previa así…

Otro ejemplo sería así:

/* Destacar menú */
.destacar-menu {
color: #ffffff;
background: transparent;
border-color: #1172c4;
border-style: solid;
border-width: 2px;
border-radius: 50px;
padding: 0px 10px;
transition: all 0.2s linear;
line-height:45px;
}
.destacar-menu a {
color:#1172c4
}
.destacar-menu:hover {
color: #ffffff;
background: #1172c4;
border-color: #1172c4;
}
li.destacar-menu:hover a {
color:#ffffff;
}º
.destacar-menu:active {
border-radius: 22px;
}

Aquí hemos aplicado una serie de estilos diferentes al pasar el cursor sobre el menú, cuando está activo, inactivo, y en vez de un color de fondo hemos añadido un trazado.

Se vería así:

A partir de este momento el límite es tu imaginación y tus conocimientos de CSS, para personalizar a tu gusto cómo quieres destacar el o los elementos del menú a los que hayas aplicado la clase CSS personalizada, u otras que crees.

Por supuesto, esta técnica, aunque aquí la hemos visto aplicada en el tema Astra, puedes usarla con cualquier tema WordPress, el procedimiento es exactamente el mismo.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!