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

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.

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