Cómo convertir el menú móvil hamburguesa de divi en un menú overlay fullscreen sin plugins

En este tutorial gratuito aprenderás a crear un menú overlay fullscreen (pantalla completa) para dispositivos móviles usando el «módulo menú» por defecto de divi y un poco de magia con CSS.

Si has sido miembro de Divi durante un tiempo, sabrás que al construir un menú personalizado desde el Generador de Temas, no hay una opción para convertir el menú hamburguesa en pantalla completa en dispositivos móviles. Esta opción solo está disponible cuando se utiliza el menú predeterminado del Personalizador de Temas. Sin embargo, gracias a este tutorial, aprenderás a aplicar un poco de magia para obtener un menú de pantalla completa en dispositivos móviles. Lo mejor de todo es que solo necesitarás un fragmento de código CSS que ya he preparado para ti.

Lo primero que tenemos que hacer es crearnos un header personalizado desde el theme builder, posteriormente vamos a construir nuestro encabezado incrustando el módulo menú. No importa los estilos que le des a tu menú para versión escritorio, en móvil lo vamos a convertir a pantalla completa.

La clave está en qué vamos a agregar el nombre de clase «ov-menu-movil-fullscreen» al módulo menú de divi.

Posteriormente en los ajustes de la página / Avanzado / CSS Personalizado pegaremos el siguiente código CSS:

/*** Estilos Menu Fullscreen Móvil ***/
body .ov-menu-movil-fullscreen .opened .et_mobile_menu,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .opened .et_mobile_menu {
  width: 100vw;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh !important;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  transition: visibility 0.3s, opacity 0.3s ease-in-out;
  padding: 0;
  overflow-y: auto;
}
body .ov-menu-movil-fullscreen .closed .et_mobile_menu,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .closed .et_mobile_menu {
  text-align: center;
  width: 100vw;
  position: fixed;
  left: 100vw;
  top: 0px;
  height: 100vh !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out;
  opacity: 0;
  visibility: hidden;
}
body .ov-menu-movil-fullscreen .et_mobile_menu li
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .et_mobile_menu li {
  list-style: none !important;
  text-align: center !important;
  width: 100%;
  padding-left: 0 !important;
}
body .ov-menu-movil-fullscreen .et_mobile_menu li .sub-menu,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .et_mobile_menu li .sub-menu {
  padding-left: 0 !important;
}
body .ov-menu-movil-fullscreen .et_pb_menu__wrap span.mobile_menu_bar,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .et_pb_menu__wrap span.mobile_menu_bar {
  z-index: 999999 !important;
}
body .ov-menu-movil-fullscreen .et_pb_menu__wrap .opened .mobile_menu_bar:before,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .et_pb_menu__wrap .opened .mobile_menu_bar:before {
  content: "\4d" !important;
}
body .ov-menu-movil-fullscreen .opened .mobile_menu_bar,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .opened .mobile_menu_bar {
  position: fixed !important;
  top: 20px;
  right: 20px;
}
body .ov-menu-movil-fullscreen .et_mobile_menu,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .et_mobile_menu {
  border-top: none;
}
body .ov-menu-movil-fullscreen .et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .et_mobile_menu .menu-item-has-children>a {
  background-color: transparent;
}
body .et_mobile_menu li a:hover {
  background-color: transparent;
  opacity: 1;
}
body .ov-menu-movil-fullscreen .et_mobile_menu li a,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .et_mobile_menu li a {
  border-bottom: none;
}

¡Listo, eso es todo! Con esta simple configuración, ¡lo hemos logrado! 😍

Sin embargo, si tienes submenús dentro de tu menú y deseas que sean colapsables, entonces llevemos a cabo dos pasos adicionales…

El primero va ser agregar en un módulo código el siguiente código JavaScript:

<script>
document.addEventListener('DOMContentLoaded', function() {
    function setup_collapsible_submenus() {
        var menuItemsWithChildren = document.querySelectorAll('.mobile_nav .menu-item-has-children > a');
        menuItemsWithChildren.forEach(function(menuItem) {
            var span = document.createElement('span');
            span.className = 'menu-closed';
            menuItem.insertAdjacentElement('afterend', span);
        });
      
        menuItemsWithChildren.forEach(function(menuItem) {
            var subMenu = menuItem.nextElementSibling.nextElementSibling;
            if (subMenu.classList.contains('sub-menu')) {
                subMenu.classList.toggle('hide');
            }
        });
        
        var menuItemSpans = document.querySelectorAll('.mobile_nav .menu-item-has-children > a + span');
        menuItemSpans.forEach(function(span) {
            span.addEventListener('click', function(event) {
                event.preventDefault();
                this.classList.toggle('menu-open');
                var subMenu = this.nextElementSibling;
                if (subMenu.classList.contains('sub-menu')) {
                    subMenu.classList.toggle('hide');
                }
            });
        });
    }
    
    window.addEventListener('load', function() {
        setTimeout(function() {
            setup_collapsible_submenus();
        }, 700);
    });
});
</script>

Posteriormente agregamos un nuevo fragmento de código CSS abajo del que ya tenemos en los Ajustes de la página / Avanzado / CSS Personalizado…

/* Estilos Menu Colapsado Movil */
body .ov-menu-movil-fullscreen .mobile_nav li ul.hide,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .mobile_nav li ul.hide {
  display: none !important;
}
body .ov-menu-movil-fullscreen .mobile_nav .menu-item-has-children,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .mobile_nav .menu-item-has-children {
  position: relative;
}
body .ov-menu-movil-fullscreen .mobile_nav .menu-item-has-children > a,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .mobile_nav .menu-item-has-children > a {
  background: transparent;
}
body .ov-menu-movil-fullscreen .mobile_nav .menu-item-has-children > a + span,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen .mobile_nav .menu-item-has-children > a + span {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  z-index: 3;
}
body .ov-menu-movil-fullscreen span.menu-closed:before,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen span.menu-closed:before {
  content: "\4c";
  display: block;
  color: #000;
  font-size: 18px;
  font-family: ETmodules;
}
body .ov-menu-movil-fullscreen span.menu-closed.menu-open:before,
.et-db #et-boc .et-l .ov-menu-movil-fullscreen span.menu-closed.menu-open:before {
  content: "\4d";
}

Si guardas los cambios ahora y revisas la parte frontal de tu sitio web, podrás notar que tu menú móvil no solo es de pantalla completa, sino que los submenús ahora son colapsables, ¡lo cual es realmente genial! 🤩

Si tienes alguna duda o pregunta, no dudes en dejar tu comentario en la sección de abajo. Siempre respondo, aunque últimamente mi prioridad son los miembros de los tutoriales exclusivos, así que daré prioridad de respuesta si eres parte de la Academia OV DIVI.

Un abrazo.