El menú móvil por defecto de Divi es funcional — pero si eres diseñador web serio, sabes perfectamente que "funcional" no es suficiente. Ese menú que cae verticalmente con un clic en el hamburguesa puede arruinar la primera impresión en mobile, especialmente cuando el resto del sitio tiene un diseño cuidado y profesional. El menú con barra lateral móvil en Divi Theme Builder resuelve ese problema de raíz: en lugar del desplegable estándar, el menú se desliza desde la derecha (o la izquierda) como una barra lateral animada. Todo con CSS y JavaScript, sin instalar ningún plugin adicional.
Este es el menú #4 de mi serie de menús personalizados con Theme Builder. Lo que quiero mostrarte acá es cómo construirlo desde cero — la estructura en Divi, el CSS que maneja la animación y el JavaScript que conecta el botón hamburguesa con la barra lateral. Al final también tienes el layout JSON listo para descargar si quieres saltarte la parte de construcción y usarlo directamente.
¿Cuándo usar este menú y cuándo no?
Este menú funciona solo en mobile — el header de desktop tiene su propia estructura independiente en el Theme Builder. En tablet puedes ajustarlo para que también aplique, pero el caso de uso principal es pantallas pequeñas donde el espacio horizontal es limitado y el menú desplegable vertical se ve apretado.
Si estás trabajando con Divi 5, vale la pena que sepas que la versión nueva del builder trae mejoras en los menús responsivos que pueden darte lo que necesitas sin tanto código personalizado. Tengo un tutorial completo sobre el menú móvil tipo app en Divi 5 donde cubro ese enfoque más nativo. Dicho eso, el método de barra lateral con Theme Builder sigue siendo totalmente válido — especialmente si ya trabajas con Divi 4 o quieres un control más granular sobre el comportamiento del menú.
Consejo: Construye el header móvil y el header desktop como plantillas separadas en el Theme Builder y asígnalas al mismo template. En Divi puedes controlar la visibilidad de cada sección por dispositivo — eso te da libertad total para diseñar cada vista sin comprometer la otra.
Estructura del menú en el Theme Builder
El header en el Theme Builder tiene una estructura específica para que todo funcione. La idea es que el header mobile contenga dos elementos principales: el botón hamburguesa (que activa el menú) y el contenedor del menú lateral (que se desliza cuando se hace clic en el hamburguesa).
Dentro del Theme Builder, el header móvil se estructura así:
- Una fila principal que contiene el logo y el botón hamburguesa. A esta fila le aplicas el CSS
display: flex; align-items: center;para que los elementos se alineen verticalmente al centro. - Un módulo de texto que funciona como el botón hamburguesa, con el HTML de las tres líneas. Este módulo recibe el ID CSS
slide-in-open. - Una fila contenedora del menú lateral, que se ubica fuera del flujo visible del header. A esta fila le asignas la clase CSS personalizada
slide-in-menu-container.
El truco está en que el contenedor del menú lateral empieza posicionado fuera de la pantalla — y solo cuando el usuario hace clic en el hamburguesa, una clase CSS lo trae al viewport con una transición animada.
El HTML del botón hamburguesa
El ícono hamburguesa no es una imagen — son tres elementos span que el CSS convierte en líneas horizontales. Esto te da control total sobre el color, el grosor y la animación de apertura/cierre.
En el módulo de texto que usas como botón, coloca este HTML en el campo de contenido (vista de código):
Poner en el identificador CSS (CSS ID): slide-in-open
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>En la fila donde va todo el contenido del menú lateral, colocar la Clase CSS Personalizada: slide-in-menu-container
Consejo: Si el menú no aparece en la posición correcta después de construirlo, revisa la posición del contenedor en el Theme Builder. El
slide-in-menu-containerdebe estar posicionado conposition: fixedoabsolute— de lo contrario puede desplazar el contenido de la página cuando se abre. Los valores correctos de posición son0%para top y left/right — no los valores negativos que a veces aparecen por defecto.
El CSS y JavaScript que hacen que todo funcione
Todo el comportamiento del menú se controla con un bloque de código que combines CSS y JavaScript jQuery. Este código va en un módulo de código personalizado en el Theme Builder — o en el CSS adicional del tema si prefieres mantenerlo centralizado.
El CSS maneja tres cosas: las líneas del hamburguesa, la animación de transformación cuando el menú está abierto (las líneas se convierten en una X) y la transición de la barra lateral. El JavaScript maneja el toggle de clases cuando el usuario hace clic en el botón.
Para entender mejor el sistema de diseño que hay detrás de estas decisiones de CSS y cómo encajan en un header profesional, el post sobre el Sistema de Diseño en Divi 5 da muy buen contexto sobre cómo estructurar los estilos de forma coherente en todo el proyecto.
🎓 ¿Quieres dominar el Theme Builder de Divi para construir headers y footers profesionales?
En el Curso de Menús y Blogs Personalizados en Divi cubro el sistema completo: Theme Builder, menús responsivos, megamenús y flujos de diseño que aplican directamente en proyectos de clientes reales.
La variante con barra lateral izquierda
El mismo sistema funciona con el menú deslizándose desde la izquierda. La diferencia está en las propiedades CSS del contenedor: en lugar de posicionar el panel fuera del viewport por la derecha, lo posicionas por la izquierda. La lógica del toggle en JavaScript es idéntica — solo cambia la dirección de la transición.
También preparé una versión del layout JSON con el menú alineado a la izquierda, que está disponible para descargar en la sección de recursos más abajo. Úsalo si el diseño del sitio con el que trabajas pide que el panel venga desde ese lado — en algunos contextos, especialmente cuando el logo está a la derecha, queda más natural.
Preguntas frecuentes
¿Funciona en tablet? Por defecto el código aplica al header que tiene activo en tablet. Si quieres que el menú lateral funcione también en tablet, asegúrate de que el header móvil que tiene este diseño esté configurado para mostrarse también en tablet dentro de las opciones de responsividad de Divi.
¿Cómo cambio la dirección del deslizamiento? En el CSS, la clase .slide-in-menu controla la posición final del panel cuando está abierto. Si quieres que venga desde la izquierda, ajusta la propiedad left en lugar de right. El layout JSON de la variante izquierda en la sección de recursos ya tiene este ajuste hecho.
¿Puedo cambiar la animación de apertura? Sí — la transición está controlada por transition: all 0.5s ease en la clase .slide-in-menu-container. Puedes cambiar la duración (0.5s), el tipo de easing (ease, ease-in-out, cubic-bezier) o aplicar una animación diferente con @keyframes si quieres algo más elaborado.
¿Funciona con Divi 5? El código en sí funciona — JavaScript jQuery está disponible en WordPress con o sin Divi 5. Dicho eso, si ya migraste a Divi 5 te recomiendo revisar primero las opciones nativas de menú responsivo que trae la nueva versión antes de implementar este sistema personalizado. En muchos casos ya no hace falta el código custom.
🎓 ¿Quieres aprender Divi 5 desde cero con un sistema profesional?
En el Curso Completo de Divi 5 tienes el flujo completo: Theme Builder, diseño responsivo, módulos avanzados y los workflows que uso en proyectos reales de clientes.
Conclusión
Un menú móvil con barra lateral deslizante es uno de esos detalles que separan un sitio correcto de uno que realmente impresiona en mobile. Con el Theme Builder de Divi, el HTML del hamburguesa, el CSS de transición y el toggle de jQuery que viste acá, tienes todo lo que necesitas para implementarlo sin instalar ningún plugin adicional. La descarga del layout JSON más abajo te ahorra la parte de construcción si quieres ir directo al resultado.
🎓 Si quieres dominar los menús personalizados en Divi, el Curso de Menús y Blogs Personalizados en Divi te da el sistema completo para construir cualquier tipo de menú con Theme Builder.
Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido prémium.
Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐
Recursos, Snippets y descargas de este tutorial 👇
Comentarios
48 comentariosPara dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →Hola Jefferson , puedes especificar la corrección al 0% y lo de la barra de desplazamiento , con una imagen, saludos me esta gustando mucho el menú lateral. saludos. Roberto
¡Listo! Imágenes agregadas
Estupendo muchas gracias, la verdad que lo voy a utilizar mucho.
Termino de ver el video me pareció muy bien , he intentado poner un modulo de menú y me anula todo, no se si se puede integrar, saludos.
Por defecto no se puede integrar. Pero puedes intentar hacerlo tal como lo hacemos en el tutorial del footer: https://uxdivi.com/tutorial-premium/theme-builder/footer-personalizado-2-con-el-theme-builder-de-divi quizá así te sirva mejor
Lo checare, muchas gracias.
sabes ayer probando puse el menú con un modulo de código el código lo saque de un widget menú y me funciono pero acabo de ver tu tutorial de footer y como lo haces de barra lateral. es bastante mejor pues lo puedes configurar a tu gusto, como siempre muy bien , muchas gracias Jefferson.
hola Jefri como hago para q mi menu sea afectado con el menu 4 del tutorial por que desaparecio el menu de pc.. gracias
La sección donde está el menú, ve a ajustes > avanzado > visibilidad y allí activa la visualización para Desktop. Importante: debes hacer los ajustes que correspondan para que el menú se vea bien en desktop.
loq yo quiero es q este la barra de menú aparezca no el menú hamburguesa se puede hacer eso como se puede hacer gracias..
https://snipboard.io/YbzAXi.jpg …..Me salio asi pero yo quiero la barra por defecto de divi gracias
azcreativo.com es mi pagina
Vale Marcos, en ese caso debes colocar construir ese menú normal con el Theme Builder y desplegarlo (en la sección) solo para desktop. Y el otro solo para móvil, como venia por defecto. De hecho en el tuto explicamos eso, que puedes construir los dos menús en esa misma plantilla, solo que una sección la despliegas solo para desktop, y está, la de este tuto, solo para móvil.
Hola Jefferson,
He creado el menú siguiendo los pasos del tutorial y va todo bien, lo único que va muy lento desde que se pulsa el botón hasta que se abre la página. No se si esto es normal?
No debería ir lento. ¿Puedes dejar el enlace de la página?
Hola Jefferson, te dejo el enlace de la web. https://exapp.es/ en las misma cabecera hay dos menús personalizados, uno que he creado para escritorio y el tuyo para dispositivos móviles. Gracias
Hola Miguel Ángel, revisé el sitio desde mi lado, en la laptop y en mi móvil y el menú se despliega correctamente y rápido en todos.
Ok, creo que ya lo he podido arreglar, era cuando hacías click en algún enlace del menú lo que tardaba en abrir la página. Era un tema de optiomización.
Otra duda, cuando se utiliza la plantilla del menú móvil, deja de funcionar el menu por defecto del escritorio, a que se puede deber?
Gracias
En ese caso, en la misma plantilla donde tienes la sección para el menú de móvil, puedes crear una sección donde despliegues un menú que solo sea visible para escritorio.
El ejemplo lo puedes ver en la clase de Header del curso de directorio. Allí hacemos exactamente esto.
Hola Jefri Los Submenús Del Menú como se hace por q tengo varias paginas….en pc todo perfecto el detalle ahora es en el mobil en el tutu no dice como hacer los submenus colapsable.. gracias
Hola Marcos, esta propuesta no es para hacer los sub-menús colapsables. Pronto haremos otro tutorial con esa funcionalidad.
Gracias
Hola Jefferson saludos desde Colombia, quiero exponer un problema que detecto con este menú, resulta que cuando estoy en el movil, así el menú este cerrado, puedo pulsar las opciones de el como si estuviera abierto y esto genera un problema con los elementos que están en la pagina de ese momento.
Espero me logre entender con este tema. de verdad afecta la funcionalidad de este menú.
Hola Diego, en efecto, lo comprobamos y si genera el error que comentas, gracias por reportarlo. Vamos a revisarlo con el equipo de desarrollo para ver que parte del código se debe modificar para que no genere más ese error. En cuanto quede actualizo el post y comento de nuevo este comentario. ¡Gracias totales!
Jefferson, agradezco tu respuesta y también aprovecho para felicitarte por esa labor de compartir conocimiento, éxitos
¡Gracias por tus comentarios! Son de gran valor y motivación 🤓
Hola Diego, me complace comunicarte que ya hemos corregido tanto el CSS como el archivo descargable de este tutorial, con la modificación que corrige el error que nos has reportado donde aunque el menú estaba cerrado quedaban activas las opciones. Puedes volver a copiar el código CSS corregido o directamente descargar de nuevo el layout e importarlo al theme builder para tu uso.
Muchas gracias por avisarnos, así pudimos modificar el código para corregir el problema. Saludos.
Hola, Jefferson M.
Excelente, muchas gracias, se nota la seriedad y el compromiso por esta gran labor de enseñar.
Saludos.👍👍
Hola! primero decir que gracias por excelente tutorial, te quería consultar si hay una forma simple para hacer este menú colapsable en el caso de que una página tenga muchos items, o requeriría un tutorial para poder explicarse? Un abrazo de Chile
Que tal Jorge, así es, de hecho abría que aplicar código adicional, no hay una forma sencilla de lograrlo.
Hola Jefferson! quería hacer una consulta, apliqué todos los pasos para hacer el menú en una one page y el problema que tengo es que al pulsar una sección de la página el menú no se cierra automáticamente, me podrías ayudar con eso? Saludos!
Que tal Jorge, por favor, revisa que hayas colocado correctamente todo el código, o en su defecto, usa el layout descargable del tuto, de manera que estemos seguros que no haya algún faltante en el código para que se ejecute correctamente el Script.
Hola de nuevo! descargué el layout e hice la prueba y en one page al pulsar la sección no se cierra el menú automáticamente, habrá algún fragmento de código que pueda corregir eso con lo que se pueda arreglar? Saludos!
Que tal Jorge, entonces es probable que el problema esté en tu instalación de WordPress, quizá con algún plugin de caché u optimización. Puedes verificar y descartar que el problema se deba a cualquier razón de caché u optimización siguiendo esta guía: https://uxdivi.com/blog/guia-para-solucionar-los-problemas-mas-comunes-en-divi
Hola Jefferson,
Hice el tutorial siguiendo tus pasos y el resultado fue un éxito. Sin embargo, podrías decirme qué debería cambiar para que el menú estuviera a la izquierda?
Gracias!
Que tal Agustín, un gusto saludarte. Son varias las cosas que hay que ajustar, pero lo que hemos hecho es hacer estos ajustes, y subimos un nuevo menú descargable desde este mismo post, por lo que lo puedes descargar, subir a tu theme builder y hacer los ajustes que necesites.
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐
Cierto. No me fijé. Muchas gracias!
Hola Jefferson, estoy teniendo un error un poco extraño. Cuando hago cualquier modificación en cualquier página y actualizo la página, la primera vez que intento usar el menú hamburguesa hace el efecto de abrir y se coloca la X, sin embargo, el menú no abre. Se arregla fácil refrescando la página pero es un poco tedioso refrescar todas las páginas y me preocupa que los usuarios de la página no sepan que se arregla así de fácil.
Que tal Alejandro, pueden ser varias cosas, pero verifica por favor las opciones de CSS estatico y de performance de Divi explicadas en está guía: https://uxdivi.com/blog/guia-para-solucionar-los-problemas-mas-comunes-en-divi
Desactivando estás opciones, debería resolverse el problema.
Parece que sí era algo relacionado con el CSS estático. Quitando esta opción y tras volver a diseñar el menú, parece que funciona bien.
¡Muchas gracias Jefferson!
Es un gusto ayudar 😊🖐
Que tal Jefferson, tengo la siguiente duda, hice todos los pasos como mencionas en el video, sin embargo me doy cuenta que cuando estoy navegando desde un celular o tablet, si por «error» muevo un poco la página hacia la izqueirda o derecha, todo el contenido de la web se mueve, es decir; es como si tuviera algún elemento demasiado grande que provocara romper el diseño de mi web. Espero poder explicarme, me doy cuenta que es debido al menú que hice con tu tutorial, ya que al cargar el menú original que tenía y tradicional de divi, este problema se corrige. Espero me puedas ayudar. De antemano muchas gracias, excelentes videos!!!
Que tal Esteban, claro que si, no te preocupes, por favor, compártenos el enlace donde hiciste la implementación para ver el error. Saludos.
Gracias. Esta es la url del sitio: https://godfoodsafety.com/
Vale, ya lo vi. Esto estimado Esteban justo lo resuelves siguiendo las indicaciones de este mismo tutorial desde la parte donde dice: «Nota importante»
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐
Efectivamente era eso!! Muchas gracias, por cierto, habrá alguna manera de poder incrustar el módulo «menú» dentro lo visto en este tutorial? (algún tutorial que explique eso) es decir, sin tener que darle el formato a los textos para que parezcan botones.
Vale, pudiera ser que sí, usando este otro tutorial para crear un menú vertical: https://uxdivi.com/tutoriales-premium/como-crear-un-menu-vertical-personalizado-en-divi
Yo no lo he probado, pero puede ser que funcione.
Hola Jefferson, he seguido el tutorial y todo funciona bien. El único problema que tengo es que los contenidos de la fila que se desplega, son más largos que los del ejemplo y necesitaría poder deslizar con el dedo hacia abajo para llegar al final, el contenido se corta y no me deja deslizar. ¿Se puede solucionar de alguna manera?
Que tal Albert, de la forma en como está estipulado el tutorial no, tendrías que ajustar la cantidad de contenidos a lo que te permite ver el menú en móvil.