Crear un botón en el menú de navegación

Convertir un ítem del menú de navegación en un botón

Hoy vamos a ver cómo podemos agregar un botón en el menú de navegación de nuestro WordPress. Una opción muy interesante para destacar elementos del menú, como puede ser la Tienda (si vendemos productos) o el Contacto (si vendemos servicio técnico o similar).

Precauciones iniciales

Algo que tenemos que tener muy presente es que necesitamos saber exactamente cual es la clase que afecta al ítem que queremos convertir en botón, ya que si utilizamos la clase del menú global (.main_navigation), convertiremos en botón todos los ítems de ese menú.

Para saber cual es la clase que afecta a ese ítem en concreto nos posicionamos sobre él, y con el botón derecho elegimos la opción Inspeccionar.

Cómo saber la clase del ítem del menú
Cómo saber la clase del ítem del menú

Código para crear un botón en el menú de navegación

Una vez que ya sabemos la clase que afecta al ítem del menú que queremos convertir en botón (en mi caso el ítem 115), vamos al personalizador de nuestros tema activo (también podemos agregarlo en nuestra hoja de estilos). Aquí tenemos que pegar este código:

.menu-item-115 a {
background-color: #000;
color: #fff !important;
border-radius: 10px;
padding: 10px 15px;
border-width: 1px;
border-style: solid;
border-color: #000;
}
.menu-item-115 a:hover {
background-color: #fff;
color: #000 !important;
border-radius: 10px;
border-width: 1px;
border-style: solid;
border-color: #000;
}

El resultado final será algo parecido a esto:

ítem del menú destacado
ítem del menú destacado

Conclusión

En mi caso, el botón es de color negro con el texto blanco, un borde sólido de 1px de color negro y un radio de borde de 10px. Al pasar el ratón por encima, los colores se invierten.

Como siempre, en tu caso debes adaptar este código a tus colores corporativos.

Para ello puedes cambiar el color de fondo del botón (background-color), el color del texto (color), el radio del borde (border-radius) y todas sus respectivas opciones en el hover (al pasar el ratón por encima de ese  botón).


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

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

He leído y acepto la política de privacidad de este sitio. *