Do not remove – Anchor for back to top button

Cambiar el icono del menu hamburguesa Elementor Pro WordPress

Al cambiar el icono del menú hamburguesa Elementor Pro le puedes dar un toque personal a tu página web WordPress.
Web-Sastre
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! 😄
cambiar icono menú hamburguesa elementor pro wordpress

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:

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:

cambiar icono menú hamburguesa elementor pro wordpress
cambiar icono menú hamburguesa elementor pro wordpress
En algunos diseños, cambiando simplemente el color ya es suficiente, en otros en cambio, un estilo de icono más similar al diseño de la página, le dará un toque personal y armonía.
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.

cambiar icono menú hamburguesa elementor pro wordpress
cambiar icono menú hamburguesa elementor pro wordpress

Paso 3

Añade a la Plantilla de la Cabecera el Widget Nav Menu y selecciona el menú que has creado.

cambiar icono menú hamburguesa elementor pro wordpress
cambiar icono menú hamburguesa elementor pro wordpress

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.

cambiar icono menú hamburguesa elementor pro wordpress
cambiar icono menú hamburguesa elementor pro wordpress

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:

cambiar icono menú hamburguesa elementor pro wordpress
cambiar icono menú hamburguesa elementor pro wordpress

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!

Compartir:
Suscríbete al Blog WordPress
¡Y no te pierdas ninguna novedad!
Directamente en tu correo

Suscríbete a Web Sastre para recibir nuevas entradas, ofertas, novedades y conseguir la Guía iniciación Elementor Pro Gratis!