Cómo resaltar un elemento de menú con CSS

A veces querrás resaltar un elemento particular de un menú en tu sitio web , ya sea mostrándolo con un color de fondo diferente, otro color de texto, etc.

Lo haremos aplicando algo de CSS a ese elemento de menú , y esta vez lo haré con el tema Astra activo, ya que es el tema de WordPress más descargado, pero la técnica es válida para cualquier tema de WordPress.

Mostrar Propiedades De Menú Avanzadas

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

Para ello iremos al personalizador ( Apariencia > Personalizar ) y, en el apartado de menú, pulsamos sobre el icono de engranaje de la parte superior derecha para visualizarlos.

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

Agrega Una Clase Personalizada Al Menú Que Queremos Resaltar

Una vez activada la propiedad avanzada de las clases CSS en los menús podemos editar nuestro menú y, al desplegar el elemento que queremos resaltar, veremos que existe un cuadro llamado “ Clases CSS ”.

Una vez identificados agregaremos una nueva clase , a la que llamaremos menú resaltado , y publicaremos los cambios.

Crea Estilos De Clase CSS Personalizados

Tenemos que crear esta clase que hemos definido, aplicando estilos a nuestro gusto.

Para ello, sin salir del personalizador, nos dirigimos al apartado de “ CSS adicional ”.

Allí podemos aplicar estilo a nuestro menú resaltado. Un ejemplo sería este:

.highlighted-menu

{

background: #d3d3d3;

border-radius: 35px;

padding: 0px 20px;

line-height: 50px;

}

Lenguaje de código: CSS ( css )

Eso se aplicaría inmediatamente en la vista previa como vimos anteriormente .

Otro ejemplo sería así:

.highlighted-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;

}

Lenguaje de código: CSS ( css )

Aquí hemos aplicado varios estilos diferentes. Al mover el cursor sobre el menú, cuando está activo, inactivo y en lugar de un color de fondo, hemos agregado un trazo.

Gracias por visitar este sitio, espero que te haya gustado y vuelvas proximamente, compartela en las redes sociales, gracias

Compartir en Facebook Compartir en twitter

Semrush sigue a tu competencia

Fecha actualización el 2021-02-16. Fecha publicación el 2021-02-16. Categoría: wordpress Autor: Oscar olg Mapa del sitio Fuente: wphelp