Ahorra hasta 20% OFF en nuestro Planes y Cursos

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Solo durante:

Ahorra hasta 20% OFF en nuestro Planes y Cursos

Seleccionar página
4
Volver al contenido del HUB: Hub | Snippets Divi

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

En este HUB Content 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.

Recomendado: Agregar íconos adicionales a Divi con Divi Icon Party + Plugin descargable.

Son esas 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:

Nos vamos al menú de WordPress > Divi > Opciones del tema

Y nos ubicamos en la ficha General:

Usamos el siguiente Snippet de 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».

¡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.

Nos vemos en el próximo Divi Snippet.

Contenido Relacionado

0 comentarios

Enviar un comentario

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

¡40% + 10% OFF en nuestro lanzamiento!

Apúntate y te avisaremos cuando esté publicada nuestra nueva plataforma uxdivitemplates.com. Te regalaremos un cupón ÚNICO de descuento del 10% adicional a los descuentos de lanzamiento.

¡Gracias! Te avisaremos cuando publiquemos nuestra plataforma y te enviaremos el cupón de descuento único por estar en esta lista.