Personalizar el menu móvil en Divi. Una propuesta chula de diseño

Una Propuesta de Menú Móvil

Personalizar el menu móvil en Divi es algo que tenía hace meses en mente. Ya comenté en el anterior post que subiría pronto un tutorial chulo para personalizar el menú de nuestra web en vista móvil. Así que lo prometido es deuda. Hoy veremos cómo podemos diseñar con CSS un menu diferente, práctico y moderno. La idea la he cogido de la web Divistride. Así que vamos a interpretarla y explicar cada parte del código para entender mejor el proceso.

Personalizar el menu móvil en Divi. Una breve introducción

Desde que apareció Divi en diciembre de 2013, ha habido fantásticas mejoras en el tema.  La verdad es que se ha convertido en un tema de referencia para muchos diseñadores web y empresas que se han centrado en crear sus propios sitios web utilizando DIVI.

Sin embargo, el menú para dispositivos móviles todavía es bastante mejorable y se ve «viejuno». Por eso es un buen momento para darle un toque de modernidad.  Haremos que destaque un poco más sobre el resto de webs. Puedes ver en la imagen destacada de este post (parte superior) cómo va a quedar tu menú cuando acabes el tutorial. De todas formas, adjunto una captura.

Cambiar el ancho del contenedor del menú:

El menú para móvil en Divi está encasillado de manera predeterminada y no nos gusta. Así que vamos a hacer que nuestro menú tenga el ancho completo agregando el siguiente código.

/** cambiar ancho del contenedor del menu **/
.et_mobile_menu {
border:0px;
width:125%;
margin-left: -12.5%;
}

Diseñando los elementos del menú

El siguiente paso es cambiar la forma en que se muestran los elementos del menú en vista móvil. Haremos que dos elementos del menú (los enlaces, vamos) estén uno al lado del otro agregando el siguiente código.

.et_mobile_menu li a,
.et_mobile_menu .menu-item-has-children > a {
width: 49%;
float: left;
background:#ffd05b;/*color boton normal*/
margin-bottom:5px;
margin-right:1%;
color:#fff;/*color texto enlaces*/
text-align: center;
}

Establecer el diseño del enlace activo

A continuación nos interesa que la página actual en la que nos encontramos se destaque respecto a los otros elementos del menú móvil. Cambiamos el color del enlace y fondo para conseguirlo. El código responsable de esto bajo estas líneas.

/** Destacar página activa **/
#mobile_menu .current_page_item a {
background: #be1521;/*color boton pagina activa*/
color: #ffd800;/*color texto*/
}

Creamos una llamada a la acción

Todos sabemos que es importante atraer al usuario a una acción determinada. En este caso, queremos que se haga click en un enlace. Por eso destacamos este enlace con un botón que ocupe todo el ancho. Verás que el código hace referencia a un número de item (.et_mobile_menu li.menu-item.menu-item-124 a). A continuación te explico cómo obtener el número de ítem.

Previsualiza tu página y abre el inspector del navegador pulsando F12 o boton derecho + inspeccionar (yo estoy usando google chrome). Pulsa en la flecha (1 en la imagen) y pasa por el enlace del menú que quieres usar como destacado para descubrir el número de ítem(2). Ese es el número que debes sustituir en el código (3). Si tienes dudas, mira el vídeo al final del post. No hes necesario que compruebes el resultado en un móvil si no quieres publicar. Puedes testarlo estrechando tu página en el navegador (te remito al vídeo de nuevo si no lo tienes claro).

/** Llamada a la acción **/
.et_mobile_menu li.menu-item.menu-item-206728 a {
width: 99% !important;
background: #4aaecf!important;
font-weight: bold;
text-transform: uppercase;
}

Cambiar el icono de cierre

Esto ya lo vimos en un post reciente junto a otros truquillos, refréscalo. Básicamente, queremos cambiar el ícono de cuando está el menú abierto por el símbolo X (u otro que te guste más) . Esto le permite al usuario usar el símbolo X para cerrar el menú aportando claridad.

Así que agreguemos lo siguiente a nuestro CSS

/** Cambiamos icono de cierre **/
.mobile_nav.opened .mobile_menu_bar:before {
content: "\51";
}

Conclusión

Si no te has dejado nada, tu menú para dispositivos móviles tendrá un aspecto nuevo y se destacará un poco más. Pero por si prefieres ver los pasos en vídeo, aquí lo tienes.