Hoy en día, gran parte de las visitas que se realizan a páginas web están realizadas a través de dispositivos móviles. Por este motivo, estamos en la obligación de cuidar la visualización de la web en móviles y tabletas.
Cómo seguramente ya sabes, el page builder de Divi nos permite mostrar los diferentes elementos (secciones, filas y módulos) atendiendo al dispositivo en que se mostrará (móviles, tablets y escritorio).
Ahora 20% de descuento Plantilla DIVI
->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins.
Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 20% se te quedará en 70 $ + IVA
NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $70 con el descuento ya aplicado.
DESCUENTO 20% PLAN YEARLY ACCESS
->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins.
Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 20% se te quedará en 199$ + IVA
NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access
Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.
DESCUENTO 20% PLAN LIFE TIME ACCESS
Pero en este caso nos vamos a centrar exclusivamente en una parte fundamental, que es el header y el menú, pero solo en lo que se refiere a la visualización en dispositivos móviles.
Vamos a ver cómo se muestran en móviles los diferentes tipos de header o cabeceras de la plantilla Divi. Veremos que opciones de personalización nos incluye Divi por defecto, cómo hacer un menú colapsable o desplegable con Divi para móviles, cómo hacer el menú flotante en móviles, opciones de personalización del menú o header en móviles con el plugin Divi Booster y Quad Menú.
Con toda esta información podrás crear un header y un menú optimizado para dispositivos móviles con tu plantilla Divi y WordPress.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE OPCIONES MENÚ MÓVIL CON WORDPRESS + DIVI
- 1.- Diferentes diseños header o cabeceras en móvil con Divi
- 2.- Opciones de personalización por defecto del header / menú en móviles con Divi
- 3.- Menú Divi en móviles desplegable o collapse
- 4.- Header /Menú en móvil, fijo o flotante con Divi
- 5.- Cambiar color icono hamburguer en móviles con Divi
- 6.- Personalizar menú móvil de Divi con Divi Booster
- 7.- Menú desplegable o Collapse para móviles con Quad Menú y Divi
1.- Diferentes diseños header o cabeceras en móvil con Divi
Según el tipo de estilo de cabecera o diseño de header seleccionado en la plantilla Divi, tendremos diferentes diseños de cabecera o header resultantes en el móvil.
Te recuerdo que los estilos de cabecera o header los puedes personalizar en: “Divi > Personalizador de temas > cabecera y navegación > Formato de cabecera”.
En este post tienes toda la info sobre los diferentes tipos de header o cabeceras con la plantilla Divi: Tipos de header con Divi
En el post que te acabo de indicar tienes toda la info sobre los estilos de header en escritorio. Vamos a ver ahora, en este post, cómo se visualiza cada uno de estos diseños en dispositivos móviles:
Diseños de header en móvil según el estilo de cabecera elegido en Divi
i.- Estilo de cabecera por defecto: Como puedes ver en la anterior imagen, el tipo de estilo de cabecera: “Por defecto” en móviles muestra el logo e icono hamburguesa en la misma línea + la lupa de búsqueda.
Nota: la lupa la puedes desactivar desde: “Divi > Personalizador de temas > cabecera y navegación > Elementos de cabecera > Mostrar icono de búsqueda”.
ii.- Estilos centrado y logotipo centrado en línea: Ambos estilos de cabecera o header se muestran en dispositivos móviles de la siguiente manera: logo en la parte superior de la cabecera e icono tipo hamburguesa debajo con la etiqueta: “seleccionar página”.
iii.- Estilos Deslizar y pantalla completa: En ambos estilos, en móviles, queda el logo y el icono tipo hamburguesa en una misma línea (sin ninguna etiqueta de texto). En caso de disponer de la barra de menú secundario, en este tipo de cabeceras no se mostraría en móviles.
SUPER DESCUENTO DIVI
En la plantilla Divi disponemos de unas pocas opciones específicas de personalización del header o cabecera en dispositivos móviles.
Para verlas iremos a: “Divi > Personalizador de temas > Estilos para dispositivos móviles > Menú para dispositivos móviles”.
i.- Ocultar imagen de logotipo: si marcamos esta opción, el logotipo no se mostrará en la cabecera en móviles ni tablets (si se verá en escritorio).
ii.- Color de texto: cambiamos el color del texto de los elementos del menú en móviles y tabletas que se muestran al hacer clic en el icono tipo hamburguesa. También cambiamos el color del propio icono tipo hamburguer, y del texto: “Seleccionar página” en caso de mostrarse.
iii.- Color de fondo: cambiamos el color de fondo de la cabecera y el menú desplegable en móviles y tablets.
Por defecto el menú en la plantilla Divi muestra en móviles y tablet todos los elementos desplegados (elemento principales y subelementos del menú). Es decir, que los subelementos que dependen de otros, se muestran directamente en dispositivos móviles sin tener que hacer clic en los elementos principales del menú.
Si tienes muchos elementos y subelementos en el menú, es posible que te aparezca un menú en móviles demasiado largo.
Por ejemplo, el menú de mi web, que como puedes ver en la siguiente imagen puede quedar demasiado largo cuando se ve en dispositivos móviles. Además, en la imagen solo se ve un trozo del menú, aún queda más.
Menú desplegado divi en dispositivos móviles
Vamos a añadir un código a Divi para implementar un menú desplegable en móviles. Es decir, un menú que muestre solo las categorías principales y un icono “+” en los elementos del menú que sean desplegables, en dispositivos móviles y tablets. Una vez desplegados, mostrará un icono «x» para volver a plegarlos
El inconveniente de esto es que los elementos principales que tengan subelementos serán solo elementos de apoyo y no podrán ser páginas reales. Esto es debido a que no se podría acceder a dichas páginas, ya que al hacer clic sobre uno de estos elementos se desplegarán otros, pero no podremos acceder a páginas asociadas con estos elementos.
Para convertir tu menú Divi en móvil en un menú desplegable, colapsable o collapsible (inglés) copia y pega el siguiente código en: “Divi > Opciones del tema > Integration”, en el área de texto con la etiqueta: “Agregar código al <body> (bueno para los códigos de seguimiento, tales como Google Analytics)”.
<style type="text/css">
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
</style>
<script type="text/javascript">
(function($) {
function setup_collapsible_submenus() {
var $menu = $('#mobile_menu'),
top_level_link = '#mobile_menu .menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ( $(this).is(top_level_link) ) {
$(this).attr('href', '#');
}
if ( ! $(this).siblings('.sub-menu').length ) {
$(this).on('click', function(event) {
$(this).parents('.mobile_nav').trigger('click');
});
} else {
$(this).on('click', function(event) {
event.preventDefault();
$(this).parent().toggleClass('visible');
});
}
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>
Este código ha sido tomado del blog oficial de Elegant themes
SUPER DESCUENTO DIVI
Como habrás podido observar, el header o encabezamiento de la web en dispositivos móviles nunca es flotante.
Cuando hablamos de un header flotante me refiero a un encabezamiento o header que permanece fijo y visible en la parte superior mientras hacemos scroll hacia la parte inferior de la web.
En otro post vimos cómo se podía seleccionar que el header o encabezamiento de la web con la plantilla Divi fuera flotante o sticky o no lo fuera-> Diseños de header con Divi
Pero si te fijas, en cualquiera de los casos, el header en dispositivos móviles nunca es flotante o sticky. Esto, en mi opinión, tiene también su lógica. Con el menú flotante en móviles disminuimos la ventana de visualización y no disfrutamos de un menú de navegación a la vista, ya que las opciones del menú están sin desplegar.
En cualquier caso, si quieres que el header en móviles con Divi permanezca flotante al hacer scroll, copia y pega el siguiente código en: “Divi > Opciones del tema > General”, en el área de texto de con la etiqueta: “CSS Personalizado” (Si dispones de un tema hijo, también lo puedes poner en el archivo style.css del Divi hijo)
.et_non_fixed_nav #main-header, .et_non_fixed_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed !important;
}
Este código está sacado de la página Styling the Divi mobile menú
SUPER DESCUENTO DIVI
5.- Cambiar color icono hamburguer en móviles con Divi
En el apartado 2 de este post vimos que desde “Divi > Personalizador de temas > Estilos para dispositivos móviles > Menú para dispositivos móviles”, opción “Color de texto” personalizábamos el color del texto de los ítems de menú y del icono tipo hamburguesa.
Pero ¿y si queremos que los ítems de menú tengan un color diferente al del botón o icono tipo hamburguesa?
Pues, tendremos que añadir el siguiente código CSS en: “Divi > Opciones del tema > General” y área de texto con etiqueta “CSS Personalizado” (Si tienes un tema hijo también puedes añadir el código en el archivo style.css)
/* Personalizar el color del botón desplegable del menú superior */
span.mobile_menu_bar.mobile_menu_bar_toggle::before {
color: #000000;
}
NOTA: puedes sustituir el color #000000 utilizado en el ejemplo por el color que quieras
Código tomado de la página: Personalizar el color del botón del menú hamburguesa
El plugin Divi Booster, aparte de añadir un montón de opciones de personalización generales de la plantilla Divi, también añade una serie de opciones de header para móviles.
El precio del plugin es de 29$ (unos 25 € aproximadamente)
COMPRAR DIVI BOOSTER
Aquí tienes más info sobre las opciones de personalización que añade el plugin Divi Booster a la plantilla Divi. Desde la página a la que se accede desde el enlace anterior, tienes otros enlaces a otras páginas específicas sobre Divi Booster.
Las opciones relativas a la personalización del menú en dispositivos móviles las puedes encontrar en: “Divi > Divi Booster > Header > Mobile Header” y son las siguientes:
i.- use an “app style” header layout on mobiles: con esta opción haremos que la distancia entre logo e icono de hamburguesa con respecto a los extremos laterales de la web, sea constante. Además, cuando se despliega el menú, éste tendrá el ancho completo del dispositivo móvil. De esta manera conseguimos un header más consistente en dispositivos móviles
ii.- Hide the search icono on mobiles: con esta opción podremos ocultar el icono con forma de lupa en dispositivos móviles.
iii.- Add text before menu button (mobiles): con esta opción podremos añadir un texto que aparecerá a la izquierda del icono de menú tipo hamburguesa, excepto en con los estilos de cabecera: centrado y logotipo centrado en línea
Texto «MENU» delante del icono hamburguesa para desplegar el menú en móviles con Divi
iv.- Mobile menú font size: tamaño de la fuente de texto de los elementos del menú en dispositivo móvil
v.- Hide secondary menú ítems in mobile menú: marcando esta opción eliminaremos del menú en móviles los ítems del menú asignados a la barra de menú secundario de Divi
vi.- Change centered menú “Select page” text: con esta opción podremos modificar el texto que aparece a la izquierda del icono tipo hamburguesa, en dispositivos móviles, cuando tenemos seleccionado el diseño de cabecera tipo “Centrado” o “Logotipo centrado en línea”. Por defecto el texto mostrado es: “Seleccionar página”
vii.- Change centered menú “Select page” background color: con esta opción podremos establecer un color de fondo personalizado al bloque “Seleccionar página” comentado en el apartado vi.
DESCUENTO DIVI + REGALO CURSO
Si utilizamos el plugin Quad Menú, además de crear un mega menú con WordPress y Divi, podremos disponer de un menú desplegable o collapse para dispositivos móviles.
Te recuerdo que, si utilizas la versión gratuita de Quad Menú y la plantilla Divi, también tendrás que instalar un plugin de integración Quad Menú con Divi.
En este post tienes todos los detalles sobre este interesante plugin y cómo implementarlo junto a la plantilla Divi: Mega menú wordpress con Quad Menu
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola buenas tardes, tengo un menú personalizado en el generador de temas de Divi, en cabecera personalizada, y necesito los que explicas en el punto 3.- Menú Divi en móviles desplegable o collapse, el codigo solo me ejecuta en el menu que viene por defecto, pero en el personalizado no se, ¿como puedo hacerlo? Gracias
Donde debería pegar el código para que haga el efecto pero en el menú personalizado?
Buenas,
Ha dejado de funcionar el código,
Sabes si hay alguna solución?
Hola Alberto.
Yo acabo de hacer una prueba en Divi 4.6.6 y funciona
¿qué versión tienes?
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Buenas,
acabo de hacer otra prueba con la última versión de Divi en este momento, que es la 4.8.1 y funciona correctamente
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Buenas,
Tengo la versión 4.8.1 de Divi
Hasta ahora no me había dado ningún problema, pero tuve que quitar el código debido a que no funcionaba correctamente (no se desplegaba).
Sí, he estado mirando lo de los cursos y tengo en mente apuntarme en un futuro cuando tenga un poco de tiempo para poder aprovecharlo bien.
Muchas gracias por tu amabilidad y espero que pronto pueda aprovecharme de esos cursos que parecen MUY interesantes.
muy bien,
oye, Me funciona también con Divi 4.8.1
Vaya, esperaba que fuera un problema de Divi, a mí me sigue sin funcionar.
Seguiré investigando.
Muchas gracias por todo y nos vemos en los cursos.
Parece que no.
Revisa el código.
Nos vemos en los cursos!!!
Parece ser que era el plugin Autoptimize, que daba problemas…
Lo he desactivado y… voilà!
Lo dejo aquí anotado por si le sucede a alguien más…
Gracias por todo Joaquín
Gracias, Alberto
Buenas,
muy bueno el post, muchas gracias. Una pregunta: ¿hay alguna forma de que en la versión de escritorio se muestre un tipo de header (por ejemplo, centrado en linea) y en la versión movil se muestre otro (deslizar)?
Gracias. Un saludo
Hola Luis.
Por el momento no existe esa opción entre las opciones de configuración de menú de la plantilla Divi.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Hola Joaquin! Tengo un problema en mi pagina web, he dejado el menu hamburguesa a la izquierda pero al desplegarse se ve muy estrecho! ¿hay alguna forma de cambiarlo y que se vea mas grande el extensible?
Por otra parte, no hay manera de que me funcione el codigo para plegar los menus que se despliegan, lo puedes ver en mi web, los que estan dentro de pendientes por ejemplo..
Gracias por tu ayuda en adelanto!
Hola Carla.
Esa anchura del desplegable del menú no es la habitual. Has tenido que realizar alguna modificación en los CSS o algo por el estilo, para que se vea tan estrecha.
Puedes verlo en la visión en móvil de esta misma web
Yo he implementado el header en divi a través del Theme builder y al realizar el Menú hamburguesa para móvil aparece muy pequeño, pero lo quiero como en tu web!
¿Habría la posibilidad de cambiar el código CSS para hacerlo más grande o hay algo que he hecho mal?
Buenas Carla.
El menú tipo haburguesa de mi web, es el que se genera por defecto con las opciones estándar de header wordpress de la plantilla Divi. No he utilizado el Theme builder. Supongo, que tu habrás utilizado el módulo menú, con el theme builder, para mostrar el menú ¿verdad?
Hola Joaquin! Estoy empezando a hacerme una web y me esta costando bastante!
He ido aprendiendo con todo lo que enseñas, y leyendo los comentarios que te han ido dejando, pero todavía me surgen varias dudas.
Lo que tengo es una tienda online y me gustaría poner el menu en horizontal, bajo del logo, y que a la derecha tuviera el icono de iniciar sesion y el carrito, pero que cuando se haga version movil solo vea un menu hamburguesa! Es posible?
Por otra parte, es posible ver las 3 rayitas del menu (Version movil) a la izquierda???
Buenas.
Entiendo que estás usando la plantilla Divi
Con las opciones de configuración de header por defecto de Divi no es posible. Pero, seguramente si usas el nuevo Theme Builder de Divi, si podrás conseguirlo.
Aquí tienes más info sobre el Theme builder, para que sepas de que va: Divi 4.0 y el theme builder
Muchas gracias! voy a estudiarmelo 😉
Un par de dudas más por fa, si, estoy usando Divi perdona, para una tienda de bisuteria online.
Cuando le doy al buscador me aparece el producto en tamaño gigante y no encuentro donde cambiarlo???
Y para la portada quiero poner 2 o 3 fotos pero solo he podido poner una en apaisada que no queda bien, porque necesito poner por lo menos dos normales!
Por otro lado, no hay manera de encontrar como instalar el tic en el newsletter. (ya lo tengo en formulario de contacto, en el pago, pero no puedo en el newsletter)
¿Puedes ayudarme porfa?
Hola Silvana.
1.- Ahora, con el Theme builder de Divi (Divi 4.0), Es posible personalizar el diseño de la página de resultados de búsqueda
2.- En cualquier caso, lo suyo sería que pusieras un plugin con un buscador profesional para Woocommerce, ya que el que viene por defecto con Divi no es muy bueno para eso
Un saludo
***Informarte también que desde mi plataforma de formación cursotiendaonline.com puedes Acceder a TODOS mis cursos online por solo 10 €/mes + SOPORTE. En la plataforma tienes cursos sobre WordPress, Cursos sobre la Plantilla Divi (incluso clases sobre Divi 4.0 y el theme builder), Cursos sobre Woocommerce, Cursos sobre SEO para tiendas online, sobre Mailchimp, blog WordPress, etc. etc.
Para ver el temario de un curso, ve a cursotiendaonline.com busca el curso cuyo temario quieras ver y haz clic en «INFO CURSO»
Por ejemplo, el tema del buscador de productos para Woocommerce lo tienes en el curso Woocommerce, y para añadirlo al header, lo tienes en las clases de Divi 4.0 y el theme builder ***
Buenos días Javier, gran ayuda tu web. Podrías decirme si hay alguna forma de replicar en móviles el mismo menu que en desktop? me refiero a que en móviles no aparezcan dentro del menu hamburguesa, sino abajo del logo o similar…
Gracias
Hola Nicolás.
No es posible, si en móvil se mostrara el menú como en el escritorio y no con un menú desplegable, sería un menú no optimizado para móviles y eso no puede ser.
Hola, tengo mi menu anclado a varias secciones de mi pagina, en escritorio todo va bien, pero con el menú movil no me sirven los enlaces.
¿Que puedo hacer al respecto para que me respete las acciones del menú como en escritorio?
Exclente pagina, Saludos.
Hola Javier.
Aunque la construcción de un menú con WordPress es independiente de la plantilla utilizada, la visualización móvil de tu menú y en escritorio depende específicamente de la plantilla que estés utilizando. Por este motivo, has de consultar este tema a los creadores de tu plantilla
Hola Joaquín … una pregunta que me esta volviendo loco a ver si puedes ayudarme. Estoy usando divi y quad menú y todo va perfecto sin embargo la en la versión para móvil me es imposible visualizar el menú secundario (que tiene entre otras cosas links concretos que no salen en ningún otro lado del site). es posible que se visualice este menú en versión móvil ??
De antemano millones de gracias aprendemos todos los días con tus consejos y tutoriales…
Buenas.
Por defecto, con WordPress y Divi se muestra el menú secundario en móviles al hacer clic en el botón tipo haburguesa. Si no se te muestra utilizando Quad Menú, es posible que haya que hacer alguna configuración especial con este plugin. En este caso concreto, lo mejor sería acudir al soporte de Quad Menú para que te informen sobre es necesaria alguna configuración especial.
Hola Joaquin, otra vez ando por tu web que siempre me ayuda, te queria preguntar como tener siempre visible el carro en divi móvil, para evitar que se tenga que acceder siempre al menú hamburguesa para ver el carro?
Gracias de nuevo
Buenas Gloria.
Si el carrito por defecto de Divi no se muestra siempre en móvil.
Prueba a ver con el carrito que añade este plugin a Woocommerce. A ver, si este se muestra siempre en móvil o no. Aquí tienes el post: Añadir el icono del carrito en el menú con Woocommerce, importe total y número productos
Hola Joaquín! Gracias por el post, me encanta tu blog.
Una pregunta a ver si puedes ayudarme, sabes si es posible dejar visible el icono del carrito de la compra en el menú móvil con divi? Al igual que se queda la lupa visible o los datos de contacto de la cabecera, que se fijará el carrito
Gracias!
Hola Noelia.
El carrito por defecto de Woocommerce, si se muestra con Divi en la visualización Móvil.
Lo que pasa es que parece que tú estás usando algún plugin para añadir funcionalidades a ese carrito, y entonces no se muestra. Si estás usando el plugin para carrito Woocommerce que menciono aquí: Plugin Carrito Woocommerce vé al foro del plugin y haz la pertinente consulta.
Muchas gracias Joaquín! Me solucionaste la vida!!
Muchas gracias por el post y el código, me funciona perfectamente. Solo me gustaría añadir un cambio que no se como hacerlo.
Me gustaría que al hacer clic en cualquier elemento del menú se colapsará cualquier opción desplegada. Actualmente, si hacer clic en una opción se despliega pero hay que volver a hacer clic para que se oculte.
Como se puede hacer de forma automática para que solo mantenga abierto el último?
Buenas,
Depende de la plantilla que uses. En el caso de Divi, no hay ninguna opción para eso.
Puedes probar a buscar algún plugin tipo mega menú para Divi, a ver si tiene la funcionalidad que comentas
Hola Joaquín, estoy haciendo contigo el curso de DIVI y me va muy bien, aunque me ha surgido un problema, no consigo mostrar el icono del menú (creo que se llama hamburguesa) en el móvil.
Gracias anticipadas y saludos
Hola Miguel,
El menú desplegable en dispositivos móviles debería aparecerte de manera automática, sin hacer nada especial.
Yo diría, que existe algún tipo de problema relacionado con las actualizaciones. Es decir, que Divi no esté actualizado a la última versión y WordPress si, o haya algún plugin que no esté actualizado y esté creando algún tipo de conflicto.
Mira también este post: diseños header divi
Hola Joaquín, me ha encantado tu aporte de este código. en realidad lo encontré porque tengo un problema con mi barra de menu principal EN LAS TABLETAS de la plantilla Divi, pues se desea que el logo se vea grande y cuando veo la visualización en desarrollo para tabletas el menú es un desastre porque no está desplegable, se superpone y además el logo se sale hacia el contenido. No he sabido dónde hacerle los ajustes y cómo.
Hola Martha,
En este post del blog de Elegant Themes parece que se aportan varias soluciones al problema que comentas:
Fixing Your Responsive Navigation Menu in Divi
Se puede poner un menú de hamburguesa sticky abajo a la derecha con DIVI?
Gracias!!
En el footer puedes poner un menú, pero ni con icono tipo hamburguesa ni sticky o pegajoso
Hola Joaquín! Muchas gracias por mencionarme en el tip 5 😉. Saludos, Javier!
Hola Javier,
Gracias a ti por tus buenos contenidos.
Un saludo
Hola Joaquín, he usado el código para que en el móvil el menú este reducido (collapse), Va genial, lo que ocurre, es que se han deshabilitado los enlaces. Es decir el menú Tienda-Bisutería-anillos, los enlaces que desde web funcionan como Tienda y bisutería, ahora no funcionan, tienes que llegar al la opción final que es anillos para poder clicar. Agradezco la ayuda que me puedas dar. Gracias
Buenas,
Efectivamente, el problema de los menús tipo Collapse, es que las cabecerás no permiten enlaces. Ten en cuenta que cuando se toca con el dedo un elemento del menú solo puede hacer una cosa, desplegarse o ir a la página (pero no las dos cosas).
Por este motivo, es necesario estructurar el menú de otra manera que se adapte a nuestras necesidades.
Hola! Estoy construyendo mi web y cuando habilito el constructor visual y visualizo la web como se verá en un ordenador, veo el header y el footer. Pero, en cambio, cuando lo visualizo cómo quedará en tablets o móviles, entonces no aparece el footer y el header.. tú sabes a qué puede ser debido? Gracias. La web no está publicada aún.
Hola Esther,
La previsualización del Divi builder tipo live o front end en dispositivos móviles omite la cabecera y footer como bien dices. Si quieres ver una previsualización de como queda tu web en móviles o tablet puedes ir, por ejemplo, a: «Divi > Personalizador de temas», en la previsualización ve a la página que quieras y después haz clic en los iconos tablet o móvil que aparecen en el menú situado en la parte inferior izquierda.
Hola Joaquín.
Muchas gracias por tus post, la verdad es que me ha solucionado la vida en más de una ocasión. Precisamente estaba buscando algo así, pero querría hacerlo en el menú que tengo para la tienda. Es un menú que he creado con las categorías, y me gustaría que se colapsase en la versión móvil.
¿Lo has hecho alguna vez? Gracias.
Buenas,
Es lo mismo que en el menú haya categorías de la tienda o que haya páginas. El procedimiento sería el mismo