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:
<script type=”text/javascript”>
(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>
<style type=”text/css”>
#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 comments to “Submenú desplegable en móvil en tema DIVI”
You can leave a reply or Trackback this post.
Matias Gimenez - 10 julio, 2018 at 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
Franky Martin (ADMIN) - 11 julio, 2018 at 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/
Manuel - 25 julio, 2018 at 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?
Franky Martin (ADMIN) - 25 julio, 2018 at 17:06
Hola Manuel, no acabo de comprender el caso que nos explicas ¿puedes explicarmerlo de nuevo? Gracias y perdona
Elisabet - 23 octubre, 2018 at 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
Franky Martin (ADMIN) - 23 octubre, 2018 at 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