Cómo Optimizar la Visualización del Menú Móvil de Divi con un Menú Colapsable
Introducción
En este artículo, te mostraré cómo optimizar la visualización del menú móvil en Divi, haciendo que sea colapsable. Esto mejorará la experiencia del usuario al navegar por tu sitio web desde dispositivos móviles. Simplemente necesitas agregar un código personalizado en la sección de integración de Divi.
1.Introducción
2.Pasos
- 1.1 Acceder a las opciones del tema Divi
- 1.2 Ir a la sección de integración
- 1.3 Añadir el código al <body>
3.Código
Paso 1: Acceder a las Opciones del Tema de Divi
Primero, inicia sesión en tu panel de WordPress y navega a Divi -> Opciones del Tema.
Paso 2: Ir a la Sección de Integración
Dentro de las opciones del tema, selecciona la pestaña Integración.
Paso 3: Añadir el Código al <body>
En la sección de Añadir código al <body>, pega el siguiente código. Este código hará que el menú móvil de Divi sea colapsable, mejorando su usabilidad:
Haz clic en el botón para copiar el código:
<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>
<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>
Paso 4: Guardar los Cambios
Una vez que hayas pegado el código, asegúrate de guardar los cambios.
Antes
Después
