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:

6 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