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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(1 votos, promedio: 5)

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

2 comentarios en “Cómo destacar un elemento del menú con CSS”

  1. Buenos días Fernando.
    Ante todo felicitarte por los artículos tan prácticos que nos dejas cada día.
    He probado de hacer lo que comentas en este artículo con el tema DIVI, pero no me aparece como a ti, sino que me aparece el remarco a mitad del menú, tachando la palabra por la mitad. A qué crees que puede deberse?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido