BL Cómo cambiar el ícono del menú hamburguesa en móvil en Divi

Cómo cambiar el ícono del menú hamburguesa en móvil en Divi

En este tutorial te mostraremos cómo cambiar el ícono del menú en la versión móvil de tu página web. Como sabes, Divi incorpora un menú distinto al estándar de la vista de escritorio para la vista del móvil. Es lo que llamamos menú hamburguesa: el menú de Divi para móvil.

¿Quieres crear menús personalizados para Divi de todo tipo? Checa nuestro curso de creación de menús y mega menús en Divi y descarga nuestros layout packs de menús de regalos con + 1000 layouts disponibles y gratis.

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Índice

El menú hamburguesa de Divi son esas tres rayitas horizontales que abren los enlaces cuando pulsamos en ellas. Pero ¿Qué pasaría si no nos gusta ese estilo y queremos que aparezca otro ícono? ¿Cómo podemos cambiarlo? De una manera muy sencilla, usando un poco de código CSS, vamos a ello:

Para aplicar el código a todo el sitio nos vamos al menú de WordPress > Divi > Opciones del tema

Y nos ubicamos en la ficha General:

Aquí en CSS personalizado agregaremos los siguientes snippets CSS para hacer los cambios en los elementos del menú hamburguesa. En nuestro video lo colocamos directamente en el código del menú personalizado, pero tu también lo puedes colocar acá y funcionará perfecto.

CSS para cambiar el ícono del menú en móvil

Copia el código CSS de acá abajo y luego de eso, vamos a la parte de abajo en CSS personalizado y pega el código CSS.

/* Cambia el icono del menu hamburgueza cuando está cerrado */
.mobile_menu_bar:before  {
    content: '\64'; /*LISTADO DE ICONO: https://www.elegantthemes.com/blog/resources/elegant-icon-font*/
	color:#000000; /*COLOR DEL ICONO*/
}

/* Cambia el icono del menu hamburgueza a X cuando está abierto */
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';  /*LISTADO DE ICONO: https://www.elegantthemes.com/blog/resources/elegant-icon-font*/
	color:#000000 /*COLOR DEL ICONO*/
}

El resultado que tendremos será el siguiente:

Cómo cambiar el ícono del menú hamburguesa en móvil en Divi
Cómo cambiar el ícono del menú hamburguesa en móvil en Divi

Podemos usar el Listado de íconos que nos da Elegant Themes para nuestro menú en versión móvil, solo que haríamos una pequeña modificación al código que nos da para que no haya problemas de visualización. Por ejemplo:

Si queremos poner este icono para nuestro menú en móvil, tenemos que reemplazar los caracteres “&#x” por “\”, siempre reemplazar hasta la x, y también sin “;” de tal manera que quedaría así: “\62”.

CSS para animar el ícono del menú en móvil

Si quieres darle animación al icono del menú hamburguesa, a darle clic o tap, tal como lo hacemos en el vídeo, podrás usar este CSS:

/* Reemplazar icono en menu hamburguesa abierto */
.mobile_nav.opened .mobile_menu_bar:before {
	content: '\4d' !important;
}

/* Icono after dropdown menu */
.et-menu .menu-item-has-children>a:first-child:after {
    content: "\33";
}

/*-----Rotar el icono en clic base-----*/

.mobile_menu_bar:before {
	transition: all .4s ease;
	transform: rotate(0deg);
	display: block;
}

/*Rotar el icono en clic final*/

.mobile_nav.opened .mobile_menu_bar::before {
	transition: all .4s ease;
	transform: rotate(90deg);
	display: block;
}

¡Y listo! Así hemos podido cambiar el ícono de nuestro menú en la versión móvil.

Si quieres usar Font Awesome para agregar más iconos a Divi checa este tutorial

¿Te ha gustado este tutorial?

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este post.

Artículos relacionados

Comentarios

  1. Hola, muy buen tutorial pero el icono no aparece en las distintas pestañas del menú.
    Sería bueno realizar un tutorial para que el icono aparezca en todas las página mobile.

    Thanks
    Pedro

Comentarios cerrados

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →