Tutorial Divi: Menú móvil desplegable extensible y plegable (actualizado)

Contraer submenú css

Por último, debemos destacar la integración con el panel de control del personalizador. Esta es una característica que sólo está disponible en la versión premium megamenu y es una característica importante si va a incluir este plugin en su proyecto temas, ya que esto le permite a usted ya sus usuarios finales para ajustar todo el esquema de color del menú o la configuración de diseño y ver el efecto de que los cambios en tiempo real.

1. Sticky navbar no funciona correctamente. Crea una barra de desplazamiento inesperada en los dispositivos móviles y oculta algunos de sus elementos de menú. Finalmente, decidí desactivarla y codificarla yo mismo para hacerla pegajosa.

4. El plugin te obliga a usar ciertas fuentes. Para mí es innecesario tener una fuente personalizada para la barra de navegación, pero si es necesario, entonces por lo menos nos dan la opción de utilizar una fuente heredada en su lugar. Si no estableces la fuente en el campo de entrada, entonces saldría “font-family: 0” porque el autor no comprobó si el campo estaba vacío sino que asignó el valor directamente. Esto resulta en un mal estilo y no es bueno para la semántica.

¿Cómo puedo contraer el menú móvil en Divi?

Añade algo de JQuery para colapsar los submenús del menú de Divi Mobile

Podemos hacer esto añadiendo un poco de jQuery y código CSS. Esto no sólo colapsará el submenú del menú móvil Divi, sino que también agregará algunos botones agradables que se pueden utilizar para indicar al usuario que hay más elementos para mostrar y dónde hacer clic.

  Muestra los últimos usuarios registrados

¿Cómo arreglar el submenú desplegable oculto del módulo de menú Divi y el menú móvil en el constructor de temas?

Para ello, vaya a Configuración de filas y a la pestaña Avanzado. En el conmutador Visibilidad, cambie Desbordamiento horizontal y Desbordamiento vertical a “Visible”.

¿Cómo puedo ocultar el menú de mi móvil?

En primer lugar, vaya a Apariencia ” Menús y haga clic en el botón Opciones de pantalla situado en la esquina superior derecha de la pantalla. Desde aquí, tienes que marcar la casilla junto a la opción “Clases CSS”. Después, desplázate hasta el elemento del menú que quieras ocultar en el móvil y haz clic para expandirlo.

Menú desplegable Divi

Como se puede decir, yo uso el tema Divi WordPress bastante para los proyectos. Es constructor de próxima generación ofrece un montón de funcionalidad fuera de la caja y requiere muy poco css retoques para que se vea bien. Un aspecto del constructor Divi que no me gusta es el sistema de menú móvil. Específicamente cuando se trata de la estructura de sub-menú. Fuera de la caja que funciona bien si usted no tiene ningún subpáginas. Si las tienes… esperemos que no tengas muchas porque tu menú móvil parecerá una versión abreviada de Guerra y Paz. En serio, he construido algunos sitios, generalmente tiendas WooCommerce, que tienen toneladas de subpáginas. El menú móvil puede estirar la longitud de la página infinitamente.

La solución parece bastante simple con un poco de jQuery aunque Elegant Themes no ha abordado la cuestión todavía en cualquiera de sus actualizaciones. Si estás buscando una solución, ¡te alegrarás de haberte pasado por el sitio! Básicamente, lo que tenemos que hacer es añadir una clase css que oculte inicialmente todos los submenús con la clase .sub-menu y, a continuación, aplicar una nueva clase que muestre el submenú una vez que se haga clic en el enlace de anclaje de nivel superior. Veamos un ejemplo de mi propio sitio, ya que por fin he podido realizar esta actualización en mi propio sitio. En parte porque mi menú de navegación no es tan profundo, pero también porque he estado muy ocupado y no era realmente una prioridad porque, bueno … no me pagan para actualizar mi propio sitio.

  Consejos para ataques de fuerza bruta a WordPress en el Codex

Menú hamburguesa Divi

Si hay un problema que me ha atormentado los últimos meses, es este. El Theme Builder es impresionante, y lo uso y abuso de él. Pero desde que Divi 4.0 fue lanzado, había un error con el menú desplegable y también el menú móvil que estaba completamente oculto detrás del contenido de la página. En los primeros meses, Elegant Themes lanzó una solución para el z-index, pero sé por varios desarrolladores que el problema sigue en curso y está bajo consideración en cuanto a la mejor manera de abordarlo. Me cansé de esperar.

El siguiente paso importante es asegurarse de que la posición de la fila se establece correctamente. En la misma configuración de la fila, busque el conmutador Posición. Esto puede o no estar ya configurado correctamente, pero sólo asegúrese de que está configurado como “Relativo”.

La solución que di anteriormente funciona en todos los casos que he encontrado, excepto un caso muy específico. En nuestro tema hijo popular # 1, Divi LMS para LearnDash, tengo las páginas del curso construido con el Divi Theme Builder. Por mi vida, no pude conseguir que esos diseños específicos funcionaran, el menú desplegable y el menú móvil siempre iban detrás de la plantilla Curso. Así que lo único que quedaba por hacer era anularlo con un poco de CSS.

Menú responsivo Divi

Una de las peticiones más comunes de nuestro popular Divi Mobile Menu Styling Tutorial es la capacidad de colapsar los elementos del submenú. Así que hoy os voy a mostrar lo que creo que es la mejor y más fácil manera de hacer esto. También voy a añadir algunos iconos de palanca de gran apariencia y le mostrará cómo el estilo de esos también. Este tutorial se utiliza mejor junto con algunos de nuestros otros tutoriales Divi Menú para obtener un hermoso menú móvil Divi bien redondeado.

  WP Inspiration

La idea aquí es cambiar el menú móvil Divi de una lista aburrida, ampliada a una hermosa lista compacta. Podemos hacer esto mediante la adición de algunos jQuery y código CSS. Esto no sólo colapsará el submenú del menú Divi móvil, sino que también agregará algunos toggles agradables que se pueden utilizar para indicar al usuario que hay más elementos para mostrar y dónde hacer clic. Este tutorial viene en dos partes, una para cada tipo de código. Ambos trabajan juntos y ambos son necesarios para que funcione.

Si estás usando nuestro tema hijo Divi gratuito, coloca este fragmento en el archivo scripts.js y elimina las etiquetas <script> al principio y al final. De lo contrario, coloque esto en su Divi>Opciones de tema>Integraciones pestaña en el “Añadir código a la < cabeza> de su blog” área de código.