Submenú desplegable en móvil en tema DIVI

Aquellos que utilizáis el tema DIVI en wordpress habréis comprobado que en dispositivos móviles todos los elementos del menú aparecen desplegados, por lo que el menú se hace en ocasiones muy extenso. Para solucionar este problema de diseño vamos a hacer que para ver los elementos de cada submenú sea necesario clicar sobre cada elemento del menú.

Si no os ha quedado claro a que nos referimos lo entenderéis con la siguiente imagen;

Para conseguir que los elementos de cada submenú no se vean en dispositivos móviles hasta que el usuario lo decida tenemos que insertar en la sección Agregar código al <body> (bueno para los códigos de seguimiento, tales como Google Analytics) que encontraréis dentro de;

Divi > Opciones del tema > Integration

el siguiente código:

(function($) {

function setup_collapsible_submenus() {

var $menu = $(‘#mobile_menu’),

top_level_link = ‘#mobile_menu .menu-item-has-children > a’;

$menu.find(‘a’).each(function() {

$(this).off(‘click’);

if ( $(this).is(top_level_link) ) {

$(this).attr(‘href’, ‘#’);

}

if ( ! $(this).siblings(‘.sub-menu’).length ) {

$(this).on(‘click’, function(event) {

$(this).parents(‘.mobile_nav’).trigger(‘click’);

});

} else {

$(this).on(‘click’, function(event) {

event.preventDefault();

$(this).parent().toggleClass(‘visible’);

});

}

});

}

$(window).load(function() {

setTimeout(function() {

setup_collapsible_submenus();

}, 700);

});

})(jQuery);

</script>

#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }

#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: ‘ETmodules’; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }

#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: ‘\4c’; top: 13px; right: 10px; }

#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: ‘\4d’; }

#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}

#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }

</style>

Guardamos los cambios y refrescamos la página en el móvil. El aspecto debería ser:

10 Comentarios

Matias Gimenez el 10 julio, 2018 a las 14:55

Estimado, buen día.

Quisiera hacerte una consulta.

En la página que administro de la empresa donde trabajo no tengo un tema hijo, me podrás pasar el código que modifique directamente en el tema divi?

Muchas gracias y disculpas por las molestias.

Saludos,

Matias

Responder

Franky Martin (ADMIN) el 11 julio, 2018 a las 12:30
Hola Matías, al tratarse de una plantilla de pago no puedo pasarte esos archivos, pero si compraste la licencia del tema DIVI puedes descargarte de nuevo todos los archivos desde la web oficial de elegant themes https://www.elegantthemes.com/
Responder

Manuel el 25 julio, 2018 a las 13:08

Y la pregunta que me surge ahora, si solo quieres que el botón sea desplegable para las subcategorías, porque el texto si quieres que siga siendo enlace?

Responder

Franky Martin (ADMIN) el 25 julio, 2018 a las 17:06

Hola Manuel, no acabo de comprender el caso que nos explicas ¿puedes explicarmerlo de nuevo? Gracias y perdona

Responder

Elisabet el 23 octubre, 2018 a las 15:20

Hola, tengo la misma pregunta de Manuel. Si el submenú se despliega no se puede usar como enlace también. Hay alguna solución? gracias

Responder

Franky Martin (ADMIN) el 23 octubre, 2018 a las 17:25

Hola Elisabet, hemos comprobado en una web donde hemos usado esta solución y el funcionamiento es el correcto. Podéis verlo en https://dulcenboca.com/. ¿Podéis enviarnos ejemplo de web donde no funciona? Gracias

Responder

Jesus el 7 octubre, 2019 a las 20:23

Hola amigos.
A ver si por favor me podéis ayudar.
Tengo ese código agregado al al de opciones de divi.
El caso es que llevo tiempo buscando una solución ya que mi menú móvil me da problemas ya que algunos items que llevan submenús no se abren salvo que esté logueado en el escritorio de wordpress.
Sólo me ocurre con las páginas que llevan a su vez submenus.
Alguna idea de qué puede pasar?

Mil gracias y un saludo

Responder

Franky Martin (ADMIN) el 8 octubre, 2019 a las 10:47

Hola Jesús, hemos revisado tu web en versión móvil y todos los submenus se despliegan de forma correcta. ¿Puedes indicarnos cuál es exactamente el error?

Responder

Jesus el 10 octubre, 2019 a las 13:35
Hola Franky.
Mil gracias por la rapidez y buena disposición.
Acabo de mirar hoy de nuevo y tienes razón , FUNCIONA jajaj.
Antes me ocurría que en La home o portada , el menú abría todas.
Pero si por ejemplo dentro del menu clickabas en terapias, nutrición y una vez en esa página de nutrición intentabas abrir otro item que tenga submenus no podía o a mi no me abría.
Ya había limpiado la caché de los navegadores y borrado la de toda la web con wp rocket pero el problema seguía.
No entiendo porqué ahora despues de varias semanas funciona.
Un saludo y nuevamente gracias por la gestión.
Responder
- Franky Martin (ADMIN) el 10 octubre, 2019 a las 13:45
  Encantado de poder ayudaros!!!
  Responder