Índice de contenidos

Cambiar icono menú móvil Divi

Realizaremos modificaciones en nuestra hoja de estilos para cambiar el aspecto del icono menú móvil Divi para adaptar el diseño del menú a tu sitio. 

Menú móvil DiviCambiar menú móvil DiviCambios icono menú Divi

Cambios en el Personalizador de Temas de Divi

Lo primero debes ir al administrador de WordPress y buscar el menú:

Divi >> Personalizador de temas

Cambiar icono menú móvil Divi

Dentro del Personalizador de temas, encontrarás un menú para editar estilos para dispositivos móviles, pulsa sobre el menú.

Modificar menú Divi

De las tres opciones que tenemos nos vamos a Menú para dispositivos móviles

personalizadortemasdivi

Aquí podemos personalizar el color de fondo de nuestro menú y el color del texto de cada item del menú, en mi caso el fondo es negro con la tipografía en blanco.

personalizadortemasdivi

Aquí puedes ver como queda el menú después de modificar los colores en el Personalizador de temas >> Edición de estilo para móviles.

personalizadortemasdivi

Si observas los cambios verás que el icono del menú móvil Divi ha quedado en color gris y también hay un borde encima del menú con el mismo color que desentona bastante con la estética del menú, así que vamos a cambiar el botón a blanco y quitar esa sombra.

El icono del menú responsive Divi no está creado con imágenes, está definido en la css con la clase: .mobile_menu_bar{ content: ‘/61/’ } y en mi caso color gris. Es decir las modificaciones que realizaremos a partir de ahora serán en la hoja de estilos .css

Aspecto del menú sin modificaciones de estilo

Menú móvil Divi

Aspecto del menú después de aplicar modificaciones en la hoja de estilos .css

Cambiar menú móvil DiviCambios icono menú Divi

Cómo cambiar el icono menú en Divi

Paso 1 – abrir archivo del tema

1.- Localiza tu archivo de estilos, algo así como style.css dentro de la carpeta de tu theme: wp_content/theme/tutheme/style.css, yo siempre recomiendo realizar modificaciones sobre un tema hijo para no perder los cambios con actualizaciones, si trabajas directamente sobre un tema principal quizá sea el momento de plantearte la instalación de un tema hijo en tu web para poder actualizar tu thema sin perder todos los cambios, si te interesa puedes leer este artículo del blog.

2.- Abre el archivo style.css

Paso 2 – Cambiar color de las rayas del icono

Para cambiar el color de las rayas del icono del menú móvil en Divi, copia las siguientes líneas de código en tu hoja de estilos.

.closed .mobile_menu_bar:before {
 color:#fff;
}

personalizadortemasdivi

Paso 3 – Eliminar borde gris del menú abierto

Para eliminar el borde gris del listado del menú, copia las siguientes líneas de código en tu archivo .css

.et_mobile_menu{
  border-top: 0px ;
}

Paso 4 – Cambiar el icono con el menú abierto

Para que cuando el menú esté abierto cambie el icono de rayas a una cruz, copia el siguiente código en la .css

.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d";color:#fff;
}

personalizadortemasdivi

Guarda el archivo con los cambios y eso es todo!! 

También te puede interesar:

1. Eliminar entrada tipo PROJECT de Divi

2. Logo fijo en Divi