submenu desplegable movil divi

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;

submenu desplegable divi

 

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:
submenu desplegable movil tema divi
submenu desplegable movil tema divi

Hosting

About the author: Franky Martin (ADMIN)

Related Posts

Optimizar Imágenes en WordPress [2019]

  • 25 febrero, 2019
  • Franky Martin (ADMIN)

Cambiar web sin perder posicionamiento

  • 1 febrero, 2019
  • Franky Martin (ADMIN)

Cumplir la RGDP en wordpress con Legal Box

  • 6 noviembre, 2018
  • Franky Martin (ADMIN)

Cambiar Seleccionar Página en Menú de dispositivos móviles con DIVI

  • 1 octubre, 2018
  • Franky Martin (ADMIN)

Blog DIVI con imagen de entrada a la izquierda

  • 1 junio, 2018
  • Franky Martin (ADMIN)

Cumplir RGDP en WordPress

  • 24 mayo, 2018
  • Franky Martin (ADMIN)

Migrar WordPress a otro servidor

  • 22 marzo, 2018
  • Franky Martin (ADMIN)

Transferir dominio de wordpress.com a otro servidor

  • 1 marzo, 2018
  • Franky Martin (ADMIN)

6 comments to “Submenú desplegable en móvil en tema DIVI”

You can leave a reply or Trackback this post.

  1. Matias Gimenez - 10 julio, 2018 at 14:55 Reply

    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

  2. Manuel - 25 julio, 2018 at 13:08 Reply

    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?

  3. Franky Martin (ADMIN) - 25 julio, 2018 at 17:06 Reply

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

  4. Elisabet - 23 octubre, 2018 at 15:20 Reply

    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

  5. Franky Martin (ADMIN) - 23 octubre, 2018 at 17:25 Reply

    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

Leave a Reply

Your email address will not be published.

once + 11 =