No se han encontrado resultados. ¿Intentar de nuevo con otras palabras?

La búsqueda debe tener al menos 3 caracteres.

¿Cómo resaltar un determinado elemento del menú?

A veces es necesario resaltar un elemento del menú en particular. Puede resaltar un menú añadiendo un color de fondo diferente, color de texto, etc al elemento de menú en particular utilizando CSS personalizado. Para aplicar CSS personalizado es necesario añadir una clase CSS para el menú. A continuación se muestran los pasos para añadir una clase CSS al menú y resaltarlo utilizando un CSS personalizado.

Menu Highlight CSS

Primer paso - Desde el panel de control de WordPress, vaya a Apariencia > Menús.
Paso 2 - Haga clic en Opciones de pantalla y marque la casilla Clases de CSS casilla de verificación.
Paso 3 - Haga clic en el elemento del menú que desee resaltar.
Paso 4 - Añade la clase CSS al elemento del menú y guarda los cambios en el menú. 

Una vez añadida la clase CSS, puede añadir CSS con respecto a esta clase. Asegúrese de añadir un punto (.) antes de la clase CSS mientras escribe el código CSS. A continuación se muestra un ejemplo de código CSS que puede probar. Tenga en cuenta que la clase CSS utilizada es menú-destacado

A continuación CSS creará un botón simple del menú:

.menu-highlight
{
 fondo: #d3d3d3;
 border-radius: 35px
 acolchado: 0px 20px;
 altura de línea: 50px !importante;
 margin: auto;
}
Menu Highlight CSS Output 1

Para el CSS anterior, el menú resaltado tendrá el aspecto que se muestra en la siguiente captura de pantalla -
A continuación CSS añadirá el botón contorneado al elemento de menú: 

.menu-highlight a{
color: #ffffff !importante;
fondo: transparente;
border-color: #1172c4;
estilo de borde: sólido;
ancho del borde: 2px;
border-radius: 50px;
relleno: 0px 10px !important;
transition: all 0.2s linear;
altura de línea:45px;
}
.menu-highlight a{
color:#1172c4 !important;
}
.menu-highlight a:hover {
color: #ffffff !important;
fondo: #1172c4;
border-color: #1172c4;
}
li.menu-highlight:hover a{
color:#ffffff !important;
}
.menu-highlight:active {
border-radius: 22px;
}

Para el CSS anterior, el menú resaltado tendrá el aspecto que se muestra en la siguiente captura de pantalla -

Menu Highlight CSS Output 2

Notas adicionales:

  • Este CSS se puede pegar en el Personalizador ▸ CSS adicional como se explica aquí.
  • Puede modificar el código CSS para cambiar los colores y el aspecto del elemento de menú resaltado.
¿Le ha resultado útil este artículo?
¿No ha encontrado una solución? Estamos aquí para ayudarle a conseguirlo.

Documentos relacionados

Astra es gratis. Ahora y siempre.

Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

REWIND

RESUMEN DEL AÑO

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form
Scroll al inicio
Ahora elija la opción que prefiera
page builder addon
Elija su complemento de creación de páginas preferido

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form