Cambiar el icono del menu hamburguesa Elementor Pro WordPress
Web-Sastre
Diseñadora Web WordPress
para empresas familiares y bloggers.
Divulgación de afiliados: Algunos de los enlaces de esta entrada son enlaces de afiliados. Esto significa que si pulsas en el enlace y haces una compra, recibiré una comisión sin ningún coste para ti. Si te hago esta recomendación, es porque Elementor Pro es la herramienta que uso a diario, y para mí es la mejor. ¡Gracias por tu soporte!
¡Hola! Te traigo un truco de Elementor Pro para dar un toque personal a tu página web WordPress: cambiar el icono del menú hamburguesa. Normalmente este icono se usa para los dispositivos móviles, aunque a veces también se puede ver en las versiones para PC.
¡Actualizado julio 2022! 😄
Tabla de contenido
Vas a necesitar tener una licencia de Elementor Pro para poder usar el Widget Menu. En el Blog WordPress de web-sastre.com vas a encontrar varias entradas sobre Elementor Pro y si te suscribes al Newsletter te puedes descargar una guía gratis de iniciación:
Si aún no tienes tu licencia de Elementor Pro, consíguela en este enlace, ¡y lleva el diseño de tu página web al siguiente nivel!
1.-
Iconos del menú por defecto
Estos son los iconos que salen por defecto, aunque tienen configuraciones para cambiar el color del icono o del fondo:
2.-
Los pasos a seguir son los siguientes:
Paso 1
Crea un menú. Si no sabes cómo crear un menú, en esta entrada del blog te cuento como hacerlo.
Paso 2
Crea una Plantilla para el Encabezado. Para crearla, estando en el Escritorio de WordPress pulsa en Plantillas > Añadir nueva
A continuación escoge del listado desplegable Cabecera, ponle un nombre para localizarla fácilmente y pulsa en CREAR PLANTILLA.
Paso 3
Añade a la Plantilla de la Cabecera el Widget Nav Menu y selecciona el menú que has creado.
Paso 4.1 - Actualización julio 2022
¡Te traigo buenas noticias! Elementor ha hecho más fácil poder cambiar el icono del menú hamburguesa. De todos modos te dejo la manera antigua, no está de más saberla.
Ahora en la pestaña de contenido del Widget Nav Menu, puedes cambiar directamente el icono.
El icono los puedes cambiar tanto en NORMAL como en ACTIVO. Además en la pestaña de AL PASAR EL CURSOR le puedes añadir una animación.
Como puedes ver se ha simplificado mucho el proceso, ¡genial!
Paso 4.2 - Antes de la actualización
Con el Widget Nav Menu seleccionado, tenemos que ir a la tercera pestaña > Avanzado y seleccionar CSS personalizado.
Paso 5 - Antes de la actualización
Añadir el siguente código para el aspecto del icono del menú activado y sin activar:
/* Código para el menú sin activar */
.elementor-menu-toggle i {
height:40px;
content: url(https://tudominio.com/wp-content/uploads/icono-menu.svg);
}
/* Código para el menú activado, suele ser una cruz para cerrarlo */
.elementor-menu-toggle.elementor-active i {
height:40px;
content: url(https://tudominio.com/wp-content/uploads/icono-menu-cerrar.svg);
}
Paso 6 - Antes de la actualización
Añade un Widget Imagen y sube las dos imágenes para el menú. Una vez subidas puedes eliminar este widget.
Paso 7 - Antes de la actualización
Sustituye la ruta del código por la tuya. En mi ejemplo no tengo los archivos por carpetas por meses ni años, la ruta depende de tu configuración de WordPress.
Al subir la imagen, en la parte inferior puedes pulsar en Copiar la URL en el portapapeles y pegar en el código que le corresponda.
La altura de la imagen y las unidades que quieras usar, dependerá de tu diseño.
Aquí te dejo un ejemplo de un icono del menú personalizado:
Con estos sencillos 7 pasos puedes cambiar el aspecto del menú hamburguesa fácil y rápido. Espero que esta entrada te haya sido de utilidad, ¡hasta la próxima!
Si necesitas ayuda en la creación de tu página web o blog WordPress, no dudes en ponerte en contacto conmigo. Para ayudas puntuales tengo bolsas de horas muy prácticas que puedes usar cuando las necesites. O si quieres que sea yo tu diseñadora web WordPress, ¡cuéntame tu proyecto!