Seis consejos para un mejor menú para móvil en Divi + plantilla de encabezado de descarga gratuita

✏️ 2020-06-17 | Divi | 1 Comentario

✅ Funciona con Divi 4 (Generador de temas) ✅ Funciona con Divi 3 (Personalizador de temas) ✅ No se requieren plugins ✅ No hay JavaScript o codificación extensa
Skribent: Victor Duse
Por Victor Duse

La actualización de Divi 4 con el Generador de temas ha abierto nuevas posibilidades de diseño del menú para móvil en Divi, pero con algunos trucos CSS simples puedes hacer que el menú hamburguesa sea aún mejor. También proporcionamos una plantilla de encabezado gratuita que puedes cargar en Divi Generador de temas. Probado con Divi 4.4.7.

Antes (menú predeterminado de Divi)

Antes (menú predeterminado de Divi)

Después (con los seis fragmentos CSS)

Después (con los seis fragmentos CSS)

Empezar

1. Agregar texto a la izquierda del menú hamburguesa

2. Cambiar el icono de colapso a una X en el menú hamburguesa

3. Eliminar la línea superior del menú para móvil

4. Centrar el texto del menú para móvil

5. Hacer que el menú para móvil tenga anchura completa

6. Hacer que el menú para móvil tenga altura completa

Todos los fragmentos de CSS en un solo lugar

BONUS: Descarga una plantilla de encabezado gratuita

Hemos creado un diseño de encabezado que puedes importar en el Generador de temas (Divi Theme Builder). El diseño contiene las seis mejoras del artículo + una barra superior con iconos de redes sociales y datos de contacto.

Descargar plantilla de encabezado

  1. Introduce tu correo electrónico a continuación para suscribirte a nuestro boletín de noticias. (Si ya estás suscrito no recibirás boletines informativos duplicados.)
  2. Descarga el archivo zip que contiene la plantilla de encabezado.
  3. Extrae el archivo zip en tu disco duro.
  4. Importa el archivo divimundo-menu-template.jsonen el área de encabezado en Divi > Generador de temas.
  5. Ajusta el encabezado y utilízalo libremente. El código CSS está en un módulo de código en el diseño/ layout. La manera más fácil de encontrarlo es utilizando el modo Wireframe.

El boletín se envía aproximadamente cada dos meses y contiene consejos, guías y ofertas. Puedes darte de baja en cualquier momento. Nunca venderemos ni compartiremos tu correo electrónico. Tu dirección de correo electrónico se almacena en Mailchimp.

1. Agregar texto a la izquierda del menú hamburguesa

Aunque las tres barras que conforman el llamado menú de hamburguesas han existido durante mucho tiempo, puede ser apropiado aclarar que el ícono contiene un menú que se puede expandir.

Ten en cuenta que el icono de menú hamburguesa debe estar alineado a la derecha para que el texto aparezca correctamente.

 

Paso a paso

  1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
  2. Pega el siguiente código CSS:
/* Agregar texto a la izquierda del menú hamburguesa en  Generador de temas */

.et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 40px;
}

/* Agregar texto a la izquierda del menú hamburguesa en Divi 3 */

#et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 33px;
bottom:30px;
}

3. Puedes cambiar el texto MENÚ a lo que desees, pero mejor si es breve.

4. Guarda los cambios.

El resultado:

Si utilizas el encabezado de Divi 3 puede que la palabra MENÙ (o la palabra que hayas eligido) tape el icono de búsqueda. Para evitar la superposición de contenido, simplemente oculta el icono de búsqueda en Divi > Personalizador de temas > Cabecera y navegación.

2. Cambiar el icono de colapso a una X en el menú hamburguesa

El hecho de que el icono de hamburguesa, con sus tres líneas, se convierta en una X cuando se expande el menú para móvil es estándar en la mayoría de los temas y aplicaciones de WordPress pero  curiosamente no en Divi. Afortunadamente, solo se requieren un par de líneas de CSS para arreglar esto y mejorar la experiencia del usuario (UX) para los visitantes de tu sitio web.

Paso a paso

  1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
  2. Pega el siguiente código CSS:
/* Cambiar el icono de colapso a una X en el menú hamburguesa */

.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

3. Solo tienes que agregar color:#000 !important; antes de la última etiqueta } para cambiar el color del icono. Reemplaza #000 (negro) con el color de tu elección.

4. Guarda los cambios.

El resultado:

3. Eliminar la línea superior del menú para móvil

La línea azul en la parte superior del menú para móvil es una pista clara de que tu sitio web está hecho en Divi. Si no quieres que tu menú sea igual como todos los demás menus en Divi puedes eliminar esta línea.

 

Paso a paso con Divi 3

  1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
  2. Pega el siguiente código CSS:
/* Eliminar la línea superior del menú para móvil */

.et_mobile_menu {
border-top:0px;
}

2. Guarda los cambios.

Paso a paso con Divi 4

El fragmento de CSS para Divi 3 funcionará perfecto también con Divi 4. Pero con Divi 4 también se puede eliminar la línea superior del menú hamburguesa sin usar CSS.  

  1. Abre el Generador de temas
  2. Edita tu plantilla de encabezado
  3. Haz clic en la rueda dentada para ir a los ajustes
  4. Ve a la pestaña Diseño > Enlaces al menú desplegable y cambia Color de línea del menú desplegable a rgba(0,0,0,0)
  5. Guarda los cambios

Esto hará que la línea tenga opacidad cero, por lo tanto haciéndola invisible.

 

El resultado:

La línea superior tiende a superponerse al menú móvil cuando se utiliza el Generador de tema. Al esconder la línea, no tienes que preocuparte por eso.

4. Centrar el texto del menú para móvil

Textos cortos tienden a funcionar mejor en moviles. Lo mismo es cierto para el menú para dispositivos móviles. No es posible centrar el texto del menu para móvil en el constructor Divi ni en el del Personalizador de temas. Pero con un par de líneas de CSS resolverás el problema, tanto en Divi 3 como en Divi 4.

Paso a paso

  1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
  2. Pega el siguiente código CSS:
/* Centrar el texto del menú para móvil */

.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

2. Guarda los cambios.

 

El resultado:

5. Hacer que el menú para móvil tenga anchura completa

Este es un ajuste que recomiendo que todos implementéis: deja que el menú para móvil llene el 100% del ancho del dispositivo móvil en lugar de colgar como una tira delgada. 

Paso a paso

  1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
  2. Pega el siguiente código CSS:
/* Hacer que el menú para móvil tenga anchura completa */

.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

2. Guarda los cambios.

El resultado:

6. Hacer que el menú para móvil sea de altura completa

Una vez que tengas el menú para móvil de ancho completo, el siguiente paso es lógico: dejar que el menú para móvil llene toda la altura de la pantalla del dispositivo móvil. También agregaremos algo de relleno (50 px) a la parte superior.

Paso a paso

  1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
  2. Pega el siguiente código CSS:
/* Hacer que el menú para móvil sea de altura completa */

.et_mobile_menu {
min-height:100vh !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}

html {
height: -webkit-fill-available;
}

2. Guarda los cambios.

El resultado:

Usamos min-height en lugar de la height absoluta para evitar que el contenido que ocupe más del 100% de la altura de la pantalla se corte o quede fuera del menú.

Todos los fragmentos CSS en un solo lugar

Aquí están los seis fragmentos de CSS reunidos en un solo lugar.

Paso a paso

  1. Inicia sesión en WordPress y ve a Divi > Personalizador de temas > CSS adicional
  2. Pega el siguiente código CSS:
/* Agregar texto a la izquierda del menú hamburguesa en  Generador de temas */
.et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 40px;
}

/* Agregar texto a la izquierda del menú hamburguesa en Divi 3 */
#et_mobile_nav_menu:before  {
content: 'MENÚ';
position: absolute;
right: 33px;
bottom:30px;
}

/* Cambiar el icono de colapso a una X en el menú hamburguesa */
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

/* Eliminar la línea superior del menú para móvil */
.et_mobile_menu {
border-top:0px;
}

/* Centrar el texto del menú para móvil */
.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

/* Hacer que el menú para móvil tenga anchura completa */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

/* Hacer que el menú para móvil sea de altura completa */
.et_mobile_menu {
min-height:100vh !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}

html {
height: -webkit-fill-available;
}

2. Guarda los cambios.

El resultado:

¿Sabías que el tráfico de Internet de móviles superó el tráfico de Internet de los ordenadores en 2016?

Más trucos para un mejor menú para móvil

Aquí hay dos entradas de blog de Elegant Themes que llevará a tu menú para móvil al siguiente nivel. Ten en cuenta de que la combinación entre los los fragmentos de código de este articulo y los consejos de Elegant Themes pueden podrían crear conflictos de diseño. Ve probando y vigila que todo funcione bien.

 

Plugin Divi gratuito con 20 estilos adicionales para tu menú hamburguesa

Crear un menú anidado para móvil con enlaces plegables

Artículos Relacionados

1 Comentario
  1. 👍👍👍

    Responder

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.