DIVI

Cómo crear un simple menú móvil colapsable en Divi

Luis FM, Estudio de diseño Web

23 de Junio 2017

Divi es un tema flexible y potente, pero como todos los temas, a medida que vas trabajando siempre encuentras alguna pequeña carencia que con algo de trabajo tratas de solventar.

Uno de los puntos flojos en cuanto a al diseño del menú en Divi, es que cuando creamos submenús, estos crecen en forma de una gran listado sin que haya forma alguna de ocultarlos.

Por una razón estética y funcional, sería más útil que estos se pudiesen ocultar y desplegar cuando lo necesitásemos.

Esta falta de funcionalidad es más acusada si vemos la web desde un dispositivo móvil, forzándonos a deslizar la pantalla hacia abajo para ver todo el contenido del menú.

Crea un menú colapsable en Divi en cinco minutos

Lo ideal es que según vallamos añadiendo más submenús al menú principal, estos queden alojados sin desplegarse y estos se muestren solamente al pulsar en el icono.

En esta imagen se puede ver como aquí, ya el menú organizado oculta una interminable lista que lo único que hace es entorpecer la navegación al visitante.

Como crear un menu colapsable en DIVI

Antes y después de crear el menú colapsable en Divi

Con un poco de código CSS y JS podemos solucionar este pequeño inconveniente. Para esto solo tenemos que navegar hasta opciones del tema en Divi, después vamos a integración y aquí activamos el botón código del cuerpo.

Una vez realizados estos pasos en la caja  “agregar código al body” agregáis los dos siguientes códigos; primero el css y justo debajo el código js. Ahora le damos a guardar.

Es muy importante que si tenéis algún plugin de cache activo borréis la cache después de terminar todos estos pasos y después refresquéis la página.

Opciones tema divi

Añade el código CSS y JS dentro del body y no olvides guardar los cambios

Otras entradas

0 comentarios

Enviar un comentario

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

Sígueme en G+ y obtén un 10% de descuento en servicios web