Cerrar video

Cómo diseñar un header con un menú principal y un menú secundario en divi theme builder

por | Ago 19, 2023 | Tutorial gratuito | 4 Comentarios

Aprende a diseñar un menú avanzado en divi (ver demo). En este tutorial vamos a construir un header personalizado completamente con el theme builder de divi.

Construir un menú en divi no es la tarea más fácil de realizar sobre todo en móvil pero gracias a este tutorial aprenderás a realizar menús avanzados siguiendo buenas prácticas y lo mejor es que aprenderás a adaptar correctamente tu menú para computadoras, tabletas y teléfonos.

Cómo diseñar un header con un menú principal y un menú secundario en divi theme builder

El header que vamos a diseñar está conformado por dos menús; uno principal y otro secundario. El menú secundario se posiciona en la parte superior de la página y consta de dos columnas con enlaces que nos llevarán a algunas páginas de nuestro sitio web. Mientras que el menú principal está conformado por el logo, enlaces principal y en la parte derecho un botón de llamada a la acción.

El tipo de composición que hacemos en este header parece ser sencillo pero en realidad tiene sus complicaciones sobre todo a la hora de adaptarlo para móvil, pero no te preocupes, te llevaré paso a paso para que aprendas a diseñar excelentes menús con divi de una vez por todas.

Cómo «cereza de pastel» al final del tutorial te enseñaré a como colapsar los sub menús en móvil, esto es realmente útil cuando tienes muchas opciones en tu menú y las quieres agrupar de mejor forma en tableta y teléfono. En el transcurso del vídeo aprenderás muchos «trucos» que te serán super utiles en tus proyectos web con divi, ¡no tiene desperdicio! así qué, no te pierdas ni un segundo.

Cómo cada uno de mis tutoriales a continuación te dejo en listados los recursos que vamos a utilizar, en esta ocasión necesitaremos algunos códigos CSS y un fragmento JS que solamente tienes que copiar y pegar…

1. Código CSS para ocultar enlaces del menú en escritorio:

@media only screen and (min-width: 981px) {
  .ocultar-enlace-menu {
    display: none !important;
  }
}

2. Código CSS para cambiar el icono hamburguesa a una X al abrir el menu móvil y ajustar la posición top del menú:

/* Ajustes menu mobile */
.menu-ov-oe .et_mobile_menu {
  top: 123% !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
  content: '\4d' !important;
}

3. Código CSS para colapsar los sub menús en móvil:

/* Submenu mobile colapsable */
#page-container .mobile_nav li ul.hide {
    display: none !important;
}
#page-container .mobile_nav .menu-item-has-children {
    position: relative;
}
#page-container .mobile_nav .menu-item-has-children > a {
    background: transparent;
}
#page-container .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;
}
#page-container span.menu-closed:before {
    content: "\4c";
    display: block;
    color: #000;
    font-size: 16px;
    font-family: ETmodules;
}
#page-container span.menu-closed.menu-open:before {
    content: "\4d";
}

4. Código JS para la funcionalidad de los sub menús colapsables en móvil:

(function() {
    function setupCollapsibleSubmenus() {
        var mobileMenuItems = document.querySelectorAll('.mobile_nav .menu-item-has-children > a');
        for (var i = 0; i < mobileMenuItems.length; i++) {
            var menuItem = mobileMenuItems[i];
            var menuClosedSpan = document.createElement('span');
            menuClosedSpan.className = 'menu-closed';
            menuItem.parentNode.insertBefore(menuClosedSpan, menuItem.nextSibling);
            
            var subMenu = menuItem.nextElementSibling.nextElementSibling;
            subMenu.classList.add('hide');
        }
        var menuClosedSpans = document.querySelectorAll('.mobile_nav .menu-item-has-children > a + span');
        for (var j = 0; j < menuClosedSpans.length; j++) {
            menuClosedSpans[j].addEventListener('click', function(event) {
                event.preventDefault();
                this.classList.toggle('menu-open');
                this.nextElementSibling.classList.toggle('hide');
            });
        }
    }
    window.addEventListener('load', function() {
        setTimeout(function() {
            setupCollapsibleSubmenus();
        }, 700);
    });
})();

Descarga la demo del ejercicio haciendo click en el botón de abajo, es completamente gratis pero si deseas donarme un café será bien recibido 😋


Descargar JSON desde

Tutoriales Relacionados

4 Comentarios

  1. Manuel

    Hola Oscar, he implementado los comandos ccs y js que pones en tu video para que el menú en el móvil sea colapsable y funciona pero no funciona del todo bien, te cuento lo que me hace a ver si me puedes echar una mano, en vez de aparecer un + en el menú principal aparece una L, si pulso a la L se me abre el menú y funciona correctamente pero tendría que ser un +, por otro lado, si pulso sobre el texto del menú principal que esta en línea con el + (en mi caso con la L), se me cierra el menú, no se si esto tiene que funcionar así, y por otro lado cuando esta el menú desplegado en la pantalla del móvil, después del ultimo texto o botón hay una separación al cajetín del menú por la parte de abajo que es lo correcto, pero cuando pulso cualquier texto del menú, esta separación se sube y tapa medio texto del ultimo botón que se ve un poco tiempo hasta que se abre el menú nuevo, no se si me habré explicado, si no lo entiendes te puedo enviar por correo electrónico unas imágenes para que te hagas una unida, un saludo.

    Responder
    • Oscar Viedma

      Apenas ando leyendo tus consultas por este medio Manuel, perdóname. Pero creo que estos temas ya lograste solucionarlos.

      Excelente Manuel, estamos en contacto.

      Saludos.

      Responder
  2. Diana

    Hola, todo me ha salido perfecto hasta lo de colapsar los submenús. No me aparece el signo de «+» y cuando hago click no se abre el submenú. He copiado el código de js tal cual lo has puesto, no sé pq no funciona

    Responder
    • Oscar Viedma

      Hola Diana, ¿Cuál es el link de tu página? La inspecciono y te digo que sucede…

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest