Por defecto diseñar el sub menú desplegable (o dropdown menu) en divi no es posible con los ajustes del módulo divi, para personalizar o cambiar los estilos de este submenu debemos recurrir a un poco de código CSS. Si bien, el sub menú que viene por defecto con divi no es para nada feo, considero que es muy común en los sitios web creados con divi que podríamos descubrir si un sitio está hecho con divi o no gracias a este menú por defecto que viene con este tema.
Por lo tanto, el objetivo de este tutorial es enseñarte a cambiar la apariencia de este sub menú con un poco de código CSS, sin complicaciones.
Para realizar este ejercicio vamos a usar el menú que creamos en el tutorial anterior, si no lo haz visto sería genial que primero le dieras un vistazo. Aunque si tu menú tiene otra composición no hay problema, puedes ver este tutorial y de todas formas vas a lograr cambiar los estilos del sub menú.
Por otra parte, si te urge y no quieres perder mucho tiempo viendo este tutorial, a continuación te dejo el código CSS para que solo lo copies y pegues en el personalizador de temas / CSS personalizado, de esta manera en menos de 1 minuto ya tendrás tu submenu con estilos completamente personalizados.
@media only screen and (min-width: 981px) {
/*** Estilos sub menu divi ***/
.et_pb_menu .sub-menu {
margin-top: 12px;
border-radius: 6px; /* borde redondeado */
border-top: none;
box-shadow: 0px 2px 16px rgb(0 0 0 / 20%);
padding: 12px 0 !important;
}
#page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul {
background-color: #ffffff!important; /* color de fondo sub menu */
}
.et_pb_menu .sub-menu li {
padding: 0;
line-height: 1.3;
width: 100%;
}
.et_pb_menu .sub-menu li a {
width: 100%;
padding: 14px 25px;
}
.et_pb_menu .sub-menu li a:hover {
color: #ff6923 !important; /* color enlace hover */
background-color: #f9f9f9; /* color fondo hover */
opacity: 1;
}
/* Icono marcador arriba del submenu */
.et_pb_menu nav > ul > li > .sub-menu:after {
position: absolute;
content:'';
left: 36px;
top: -26px;
border-style: solid;
border-width: 14px;
border-color: transparent transparent #ffffff;
}
}
/* Icono indicador sub menu */
.et-menu .menu-item-has-children>a:first-child:after {
content: "\43";
}
.et-menu li ul .menu-item-has-children>a:first-child:after {
content: "\45" !important;
}
Por el contrario si quieres aprender a modificar los estilos del sub menú con un poco de código CSS no esperes más y dale play al video.
¡Muchas gracias por tu tutorial! me resultó perfecto y pude disipar muchas dudas que tenía con los códigos. De todas formas quisiera saber si se puede determinar el ancho del submenú proporcional a la palabra, o sea que el ancho del menú desplegable nunca supere un cierto margen de la palabra más larga. tengo un submenú con palabaras muy cortas que parecen nadar en el desplegable. ¿se puede hacer por css? ¡Muchas gracias de nuevo!
Hola Gabriela qué tal, si se puede hacer algo así Gabriela, se tendría que inspeccionar tu sitio para ver cual es la palabra más larga y con base en eso determinar un ancho.
Si quieres puedes hacerlo tu misma, intenta con este código:
#menu-menu-principal .sub-menu { width: 200px; /* reemplaza el valor del ancho */ }Si no te funciona puedes compartirme tu sitio y te ayudo a detectar la clase.
Saludos.
Gracias! pero quería algo más automatizado, porque esa manera no permite al administrador del sitio cambiar los ítems de menú como quiera, más bien debería ser un ancho flexible.
Puedes intentar probando que en lugar de width sea min-width y dependiendo de las palabras el menú se debe ir haciendo más ancho. Aunque divi por defecto usa un límete y en determinado ancho hace un salto de línea.
Hola, excelente, estoy muy agradecido contigo. Me gustaría saber como hiciste para modificar el diseño de las cajas de comentario. Gracias
Hola qué tal José, para el diseño de estos comentarios divi viene con un módulo de comentarios que puedes personalizar como cualquier otro módulo. Puedes generarte un layout desde el generador de temas para la página de las entradas y allí insertas los comentarios. Cualquier duda, estoy para servirte. Saludos
Hola! Tengo este menú configurado en mi sitio pero no logro que en la vista del menú en el móvil (menú hamburguesa) los ítems puedan ocultar y desplegar los submenús. Esto me ha resultado en otros menús por defecto, con css y js, pero no aquí. ¿Podrías ayudarme?
Hola Gabriela, si estás utilizando el generador de temas con este post de elegant themes lo logras.
Muchas gracias! seguí el consejo de eleganthemes y pude hacerlo, pero el submenú se despliega demasiado rápido y muy brusco. Eleganthemes tiene cerrados los comentarios para ese artículo, ¿quizás sabes cuál es el código que debo modificar para ralentizar el movimiento? gracias por tu ayuda!
La verdad también lo tengo implementado en este sitio y está tal cual, no he tratado de hacer lo que deseas así que no podría ayudarte, seguramente se puede pero tendría que dedicarle tiempo para realizar las pruebas correspondientes. También puedes ponerte en contacto con el soporte de Elegant Themes seguramente ellos te pueden ayudar mejor que yo. Quizá más adelante le dedico tiempo a eso y te comparto la solución pero en este momento ando saturado en otras cosas. Lo siento.
Hola Óscar, de antemano agradecerte por tan buen contenido, he seguido la guía de elegant themes para hacer un menú móvil parecido al que tienes en tu web, pero cuando presiono para ver los elementos del submenú no se desplaza, pero lo más raro es que cuando lo previsualizo desde Apariencia-Personalizar y lo toco si funciona bien, pero luego en los navegadores no, la web que estoy creando es redlibertad.com, si pudieras ayudarme porfa.
Hola Juanpy, muchas gracias a ti también.
Sobre el problema que tienes con el menú colapsado puede ser debido a la configuración que tienes de divi performance. Deshabilita la opción de Defer jQuery And jQuery Migrate, quizá con ese quede.
Si no, aquí te dejo otra alternativa para colocar los menús colpsados en móvil.
Hola! Muchas gracias por la explicación, es realmente muy buena y util. En mi caso, el menú desplegable me aparece recién por debajo de la linea donde termina el menu (En este casi cuando termina el fondo blanco donde está el logo) y quisiera poder subirlo para que no quede tanto espacio. Cómo podría hacerlo con CSS? Muchas graicas
Hola Nadia qué tal, compárteme la url de tu sitio y lo reviso para ayudarte con el código CSS.
Mucha gracias, me ha parecido útil tu contenido. Solo tengo un problema, en el menú móvil el contenido no me aparece despegable, lo que hace que se vea mal estéticamente. Mi web es: thonybarrera.com qué código puedo utilizar para solucionarlo. (mi web está en construcción)
Hola Anthony, ¿Te refieres a las opciones del menú colapsadas? Si quieres tener un menú móvil colapsado sigue este tutorial de elegant themes…
hola, muy bueno el tutorial y muy útil, tengo una pregunta si me puedes ayudar con el menú desplegable en el móvil
Hola Carlos, ¿Te refieres a colapsar los sub menús en móvil? Si es eso te recomiendo este post de elegant themes.
Hola, ¿como puedo cambiar el ancho (largo) del menú principal en DIVI?
Hola Carime, ajustando la anchura de la sección que contiene el menú. Aquí tengo un tutorial para que aprendas a construir un menú desde el generador de temas.
Hola, si solo quiero cambiar el color a un elemento del menú, ya he intentado varias cosas pero tiene un important por el color del menú y el hover y no me deja, como podría ser solo cambiar una opción del menú sin afectar lo demás? muchas gracias
Hola Juan Carlos, deberías buscar la clase única de esa opción del menú. También podrías ponerle un nombre de clase desde Apariencia > Menús. Y luego mediante CSS colocar el color.
Si me compartes la url de tu sitio y me dices que opción del menú quieres cambiar de color te puedo apoyar con el CSS.
Saludos.
He seguido atento tu tutorial “Cómo darle estilos o personalizar el sub menú desplegable del módulo menu divi”, es algo que andaba buscando para afrontar un trabajo concreto. Muy instructivo y de gran comprensión, como todo lo que haces. Para estas cosas eres el mejor. Mi Gurú de cabecera !!
También me lo facilitó mucho el enlace que lo acompaña: “Cómo crear un menú anidado que se colapsa para dispositivos móviles …” de Elegant Themes.
Lamentablemente parece que sólo consideran dispositivos móviles los teléfonos. ¿Qué pasa si quisiera aplicar ese mismo estilo para Tableta/iPad?
¿Podrías indicarme qué hacer para conseguirlo?
Muchas gracias por todo lo que haces.
Un cordial saludo.
Hola Tomassetti, muchas gracias. Me da gusto saber que este tutorial te ha servido.
¿Te refieres el estilo de colapsar el menú? Si es así, puedes intentar colapsar el menú con estos otros tutoriales:
How to Create a Divi Mobile Menu Collapse Effect.
How To Collapse Divi Mobile Menu Submenus.
Divi Mobile: Collapse Submenus.
Hola! Me vino perfecto el tutorial, te hago una consulta? Se puede agregar imagenes al mega menu? porque estaba usando un plugin que se llama mega menu, pero no me reconocia la version movil, habia hecho el encabezado con la llamada a la accion que enseñaste en otro tutorial, para resolverlo encontre este tutorial que me salvo. Solo quisiera saber si es posible adicionar una imagen. Muchas gracias! Estoy aprendiendo muchisimo!
Hola Sandra para colocar imágenes en el menú puedes ver este tutorial premium que es para crear un mega menú sin plugins. Te puede ser útil.
Hola Oscar, quise implementar esto en el menú movil, pero no pude 🙁 ¿Crees que me puedas ayudar?
Ósea que en el menú vista móvil y tableta, quisiera agregar un ícono arriba del menú apuntando hacia el icono de hamburguesa.
Hola José, ¿Lo lograste? Si quieres compárteme la url de tu web y veo que podemos hacer.
Saludos.
Hola me gustaría saber como hacer que cambie de color al hacer el scroll, que pase de transparente a un color cuando se este haciendo scroll, estoy intentando hacerlo yo per ono eh podido me preguntaba si me podrías dar un consejo.
Hola Kevin, ¿Qué cosa quieres que cambie de color al hacer scroll? Si es el fondo de sección mira este otro tutorial.
Oscar, como te va, tengo un problemita seguro una cosita así de chiquita para vos, pero yo no puedo resolverla luego de meter y meterle mano a la config. Construí un menú desde el generador de Temas con los estilos y todo eso, pero este no se despliega sobre el contenido en cualquiera de sus vistas (Escrit, Tablet, Movil) solo en la vista Movil se despliega, pero apenas salgo del constructor ya no, y checado desde un movil, nada.
Si le amplio la altura del modulo ahi sí se ve, porque se despliega sobre su propio espacio, pero no se monta sobre el Body.
Para cuando tengas un ratito…, Gracias
Hola Juan Carlos, disculpa por responderte hasta ahora. Si aún tienes el problema que me comentas envíame la url de tu web y la reviso.
Saludos.
Hola, hago todo el proceso pero no me coge los cambios
Hola Sebastian, puede ser por tu hosting que no guarde cambios. Debes cumplir con todos los requisitos PHP de divi, esto lo revisas desde Divi > Support Center > System Status…
Hola buena tarde .Tengo no se si sea problema del Word press divi o que hice algo q no debía, pero la paleta de colores no me despliega como antes con las dos barras laterales y ahí se movía el color mas fácil , solo me muestra el color el numero y no sale la gama no se que paso me podrías dar un tips gracias te agradezco 🙂
Hola Monica es probable que sea un «bug» de la versión de divi que tienes. Es importante tener la versión más reciente de divi instalada, otra cosa que podría ser es una incompatibilidad con un plugin, sobre todo un plugin cache.
gracias pero plugin solo tengo el que tu diste una vez en una elaboración de un ejercicio el de shotcord y pues lo del bug no sabría si es ,estaba trabajando bien me paso después de que realice lo de la pestañas laterales y deslizantes que subiste al YouTube porqué no se q pasaría ,prácticamente he replicado casi todo lo que haz hecho en you tube y me encanta por cierto es muy rápido sencillo y bien explicado me encanta tu trabajo 🙂
Hola Óscar, veo que si no bajas al submenú por la parte del marcador de arriba es complicado abrirlo, o subes mucho el submenú o no se abre…
Hola Juan Antonio, prueba agregando el siguiente código CSS:
.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a { padding-bottom: 10px !important; }Este código sirve para darle más relleno inferior a los enlaces principales del menú y terminen justo donde empieza el sub menú.
Pruébalo porque puede variar dependiendo tu menú, por ejemplo, en este mi sitio web funciona 🙂
Gracias Óscar, gracias por tu respuesta. Funciona perfectamente.
Saludos