Cómo crear un menú de superposición de pantalla completa con el módulo de menú Divi

Uno de los ajustes faltantes en divi resulta ser, un menú de pantalla completa. Por lo que vamos a ver como crear dicho menú, y como configurar para que este se visualice de forma general en el sitio (pantalla completa).

Crear un encabezado de generador de temas (header)

Para que esto funcione, es necesario utilizar el módulo Menú en una plantilla de encabezado de Theme Builder (header). Como primer paso es ir a:

Divi> Generador de temas

En esta sección agregar o editar la plantilla de encabezado. Si desea que el menú aparezca en todas las páginas de su sitio, utilice la primera plantilla para crear una plantilla de encabezado global. Si solo desea esto en ciertas páginas, o simplemente desea probarlo, puede crear una nueva plantilla y usar un encabezado personalizado.

Agregar ajustes en módulo de menú

Una vez que entremos en la plantilla de encabezado, agregue una fila de una sola columna y agregue el módulo Menú. En este punto, no se requieren ajustes necesarios para la configuración del módulo Menú, pero aquí hay algunos que recomendaría.

  • Establezca el color del texto en la pestaña Diseño > Cambio de texto del menú
  • Haga que el tamaño de la fuente del texto sea más grande en la pestaña Diseño > Cambie el texto del menú y ajústelo para escritorio, tableta y teléfono con capacidad de respuesta
  • Establezca la altura de la línea de texto en 1,2 em
  • Establezca el color del menú de hamburguesas en la pestaña Diseño> Alternar íconos
  • Haga que el tamaño de fuente del ícono del menú de hamburguesas sea más grande en la pestaña Diseño> alternar íconos

Estos son totalmente opcionales, pero si haces esto, puedes lograr un diseño increíble muy rápidamente.

Agregar una clase CSS personalizada a la sección

Normalmente, agregamos una clase CSS al módulo, pero en este tutorial, debemos agregar la clase CSS personalizada a la sección azul. Esta es la misma sección donde agregó el módulo Menú en el paso anterior.

Abra la configuración de la sección, vaya a la pestaña Avanzado y abra el botón ID y clases CSS personalizadas. Allí debe escribir «we-fullscreen-menu» en el campo de entrada Clase CSS.

Agregar el CSS personalizado para hacer que el menú se muestre a pantalla completa

Ahora, debemos ingresar el código personalizado en nuestra configuracion de Divi, para ello ingresamos en:

Divi > Opciones del tema > CSS personalizado

En esta seccion agregaremos el siguiente codigo:

/*Alinear menu hamburguesa a la derecha*/
.we-fullscreen-menu .et_pb_menu__wrap {
justify-content: flex-end !important;
}

/*ocultar versión escritorio del menu*/

.we-fullscreen-menu .et_pb_menu__wrap .et_pb_menu__menu {
display: none !important;
}

/*mostrar versión teléfono en escritorio*/

.we-fullscreen-menu .et_pb_menu__wrap .et_mobile_nav_menu {
display: block !important;
align-items: center !important;
}

/*Estilizar menú*/

.we-fullscreen-menu .opened #mobile_menu1 {
width: 100vw !important;
position: fixed !important;
top: 0em !important;
left: 0vw !important;
height: 100vh !important;
display: flex !important;
justify-content: center !important;
flex-direction: column !important;
opacity: 1 !important;
visibility: visible !important;
transition: visibility 0.3s, opacity 0.3s ease-in-out;
padding: 0 !important;
}

/*Estilizar menú cerrado*/

.we-fullscreen-menu .closed #mobile_menu1 {
background-color: #fff !important;
text-align: center !important;
width: 100vw !important;
position: fixed !important;
left: 100vw !important;
top: 0em !important;
height: 100vh !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-direction: column !important;
transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out;
opacity: 0 !important;
visibility: hidden !important;
}

/*remover bullets points de menú*/

.we-fullscreen-menu #mobile_menu1 li {
list-style: none !important;
text-align: center !important;
width: 100%
}

/*Mover menú al inicio de todo*/

.we-fullscreen-menu .et_pb_menu__wrap span.mobile_menu_bar {
z-index: 999999 !important;
}

/*Cambiar icono de menú abierto*/

.we-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
content: "\4d" !important;
}

/*posición fija del menú*/

.we-fullscreen-menu .opened .mobile_menu_bar {
position: fixed !important;
}

/*remover borde del menú*/

.we-fullscreen-menu .et_mobile_menu {
border-top: none;
}

/*remover color de fondo del menú*/

.we-fullscreen-menu .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
}

/*configurar opacidad del menú*/

.et_mobile_menu li a:hover {
background-color: transparent;
opacity: 1;
}

/*configurar bordes del menú*/

.we-fullscreen-menu .et_mobile_menu li a {
border-bottom: none;
}

Luego de agregar este código a nuestro Divi, ya tendremos creado el menú de la forma que queremos:

Updated on 17 agosto, 2022

Related Articles