7 formas de configurar el menú de Divi para móvil (menú hamburguesa)

por | 3 Sep, 2018 | css, Menús

El menú de Divi para móvil

Como sabes, Divi incorpora un menú distinto al estándar de la vista de escritorio para la vista del móvil. Es lo que llamamos menú hamburguesa: el menú de Divi para móvil. Son esas esas tres rayitas horizontales que abren los enlaces cuando pulsamos en ellas.

Es posible que hayas experimentado alguna vez frustración cuando después de diseñar tu web con tanto mimo, adviertas que tu menú Divi para la vista de móvil no queda bien. Seguramente te has preguntado cómo ocultar los vínculos de tu menú secundario en la vista móvil. O como ajustar el tamaño del logo porque se ve muy grande en el móvil. A lo mejor, has necesitado añadir un logo distinto de la vista de escritorio para cuando se vea en los smartphones. O que se mantenga fijo cuando te desplazas por tu web en el teléfono. También configurar el color del menú Divi para móvil y los iconos. O tal vez tener un estilo de menú en la vista escritorio y otro distinto en el teléfono.

En fin, si has tropezado con alguno de estos problemas en tus proyectos, estás en el sitio adecuado. En este post veremos cómo podemos solucionar cada uno de estos supuestos. Y lo haremos con un poco de código de CSS.

No vamos a entrar en la configuración desde los ajustes del tema. Sabemos que podemos ajustar varios parámetros desde este panel pero solo haremos referencia cuando sea estrictamente necesario.

Doy por hecho que ya tienes un menú en tu sitio, de lo contrario deberás crear uno. Ya sabes, desde tu escritorio de WordPress, Apariencia > Menús, puedes crear y configurar uno.

Espero que puedas encontrar hoy esa configuración que llevas tiempo buscando y no encontrabas. Vamos a ello.

#1. Ocultar los links del menú secundario en el menú Divi para la vista de móvil.

En tu vista escritorio puedes crear un menú principal y un menú secundario. Está muy bien y es muy práctico. Nos va de perlas para incluir por ejemplo los enlaces relacionados con la ley de protección de datos. O un acceso a la página de contacto. El teléfono de nuestra empresa, etc.

enlaces-de-menu-secundario

Pero cuando ves tu web en el móvil, resulta que te suma estos enlaces a los que tienes en tu menú principal.

enlaces-de-menu-secundario-en-movil

¿Te parece demasiado extenso el menú cuando añade los enlaces del menú secundario? Pues vamos a ocultar los enlaces innecesarios.

Ve al panel de CSS, desde Divi > opciones de Tema o Divi > personalizador de temas. Pega ahí el código que te proporciono a continuación.

/* ocultar links menu secundario*/
.et_mobile_menu .menu-item-137 , .et_mobile_menu .menu-item-138 , .et_mobile_menu .menu-item-139 , .et_mobile_menu .menu-item-153 {
display: none;
}

Te preguntarás cómo saber el número asignado a los ítems de tu menú secundario (en el código 137,138,139 y 153). Te lo cuento a continuación.

Previsualiza tu página y abre el inspector del navegador pulsando F12 (yo estoy usando google chrome). Pulsa en la flecha (1 en la imagen) y pasa por cada enlace del menú secundario para descubrir el número de ítem(2). Esos son los que debes sustituir en el código (3). Si tienes dudas, mira el vídeo al final del post. No hace falta 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).

consola-google

#2. ¿Se ve demasiado grande tu logo en la vista de teléfono?

A veces, por distintas razones, puede verse tu logo demasiado grande en la vista para móvil. Es posible forzar el tamaño mediante CSS para solucionar este desajuste. Tal vez el siguiente código te ayude a resolver el problema. Ya sabes donde debes poner el código.

cambiar-tamaño-logo.menu-movil

 

/*--Ajustar tamaño de logo en moviles--*/
@media (max-width: 980px){
#logo {
max-height: 65%;
}
}

#3. Menú fijo al desplazarnos por la web en el móvil

Por defecto, cuando estamos navegando en las páginas de una web desde un teléfono y bajamos a otras secciones el menú desaparece. Para verlo de nuevo debemos desplazarlos a la sección superior. Esto hace que perdamos la referencia para la navegación. Y puede ser incómodo tener que subir cada vez que necesito usar el menú.

Fijate en la captura bajo estas líneas. En la imagen de la izquierda se le aplica el CSS y se mantiene el menú cuando hacemos scroll. En la de la derecha no tiene CSS y desaparece al hacer scroll.

menu-movil-fijo-en-divi

El siguiente CSS nos vendrá bien para que nuestro menú no desaparezca nunca.

 

/* Menú fijo Divi en móvil */
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
    position: fixed !important; } }

#4. Cambiar el color del menú en la vista de teléfono

Aunque Divi adopta el color de énfasis de nuestra web (lo elegimos en Ajustes generales > Ajustes de formato dentro del panel de Divi > personalizador de Temas), tal vez no queramos cambiar este color solo para esto. A lo mejor ya estamos usando este color en muchas otras zonas de nuestra página y cambiarlo afectaría a todas esas páginas.

Así que podemos hacerlo con un poquito de código CSS. Esto sobreescribirá el color por defecto.

color-menu-hamburguesa

 

Aqui tienes el código.

 

 /* color rallitas menu móvil */
.mobile_menu_bar:before{
color: #428bca;
}

#5. Cambiar icono del menú hamburguesa cuando está abierto

Este es otro detalle que podemos mejorar en nuestro menú. Divi mantiene el mismo icono de la tres rayitas horizontales en ambas situaciones. Cuando el menú está cerrado y cuando está advierto. Lo ideal sería que cuando esté abierto muestre un icono que invite a cerrarlo cuando queramos. Este código bajo estas líneas hacen eso. Puedes elegir si lo deseas cualquier icono que incorpora Divi. Si quieres saber sus códigos accede a este post de Elegant Themes.

cambiar-icono-menu.movil.-abierto

 /* Cambia el menu a X cuando está abierto */
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}

#6. Un logo para la vista escritorio y otro para la vista móvil

¿Y si pudiéramos tener un logo para cuando se ve nuestra web en un ordenador y otro distinto para los móviles? Una empresa que se precie dispone seguramente de una identidad corporativa. Esto incluye un logo en muchas variantes. Una versión del logo para cuando aparece sobre fondos claros y otra para oscuros. Versión horizontal, vertical. Para cuando esté junto a otros logos. En color, en blanco y negro.

En fin, una variedad que cubre todas las posibilidades, y entre ellas, versiones para incluir en la web. Para la vista de móvil, querremos optimizar el espacio disponible incorporando un logo en versión horizontal. Esto nos va a permitir tener más espacio para los contenidos. Una distribución más razonable de nuestra web. Al final, todos los detalles suman. ¿No te parece? Pues eso, que aquí tienes el código que te permite hacer esto.

/* Cambia el logo en menu movil */

@media only screen and (max-width: 981px) {
 #logo {
    content: url("https://url del logo");
  }
}

#7. Menú centrado en línea para el escritorio y estándar para el movil

Seguimos con el concepto de optimización que hemos visto en el anterior punto. Muchas veces, tras probar los distintos estilos de menú que nos proporciona Divi, vemos que el que mejor queda es el menú centrado en línea. Esto es, el que coloca el logo en el centro y los enlaces del menú a izquierda y derecha de éste.

Pero claro, cuando lo vemos en el móvil la cosa cambia. Se come demasiado espacio. El logo se ve encima. Y debajo una zona donde se lee “seleccionar página” y las rayitas a la derecha. Vaya, en esta vista no nos sirve. ¿Podemos usar en esta vista el estilo de menú estándar sin renunciar al centrado que tanto nos gusta en la vista de escritorio? Ya sabes la respuesta.

menu-por-defecto-en-movil

Aquí abajo tienes el código. Un poco largo, pero merece la pena. ¿O no?

 /* CAMBIA EL ESTILO DE MENU DE CENTRADO EN LINEA PARA ESCRITORIO A ESTANDAR PARA MOVIL */
@media all and (max-width: 980px) {
/* align header container text to left */
    .et_header_style_centered #main-header .container,
    .et_header_style_split #main-header .container {
        text-align: left;
    }
/* set max width for logo container and bring it above the navigation bar to make it clickable */
    .et_header_style_centered header#main-header .logo_container,
    .et_header_style_split header#main-header .logo_container {
        position:relative;
        z-index: 2;
        max-width: 50%;
    }
/* move split header logo to left */
    .et_header_style_split header#main-header .logo_container {
        float: left;
    }
/* prevent the split header logo from shrinking by increasing its max width */
    .et_header_style_split #logo {
        max-width: 100%;
    }
/* ajustar alineación superior*/
    .et_header_style_centered #main-header div#et-top-navigation,
    .et_header_style_split #main-header div#et-top-navigation {
        position: absolute;
    }
/* hacer fondo de "selecciona pagina" transparente */
    .et_header_style_centered #main-header .mobile_nav,
    .et_header_style_split #main-header .mobile_nav {
         background-color: rgba(0, 0, 0, 0); 
    }
/* quiramos espacio derecha e izquierda innecesario */
    .et_header_style_centered #main-header .mobile_nav,
    .et_header_style_split #main-header .mobile_nav {
         padding: 5px 0px;
    }
/* eliminar margen superior innecesario */
    .et_header_style_centered #et_mobile_nav_menu,
    .et_header_style_split #et_mobile_nav_menu {
        margin-top: 0px;
    }
/* ocultar el contenedor "seleccion pagina" */
    .et_header_style_centered #main-header .mobile_nav .select_page,
    .et_header_style_split #main-header .mobile_nav .select_page {
        display: none;
    }
/* adjust vertical and right alignment of the mobile menu bar */
    .et_header_style_centered #main-header .mobile_menu_bar,
    .et_header_style_split #main-header .mobile_menu_bar {
        position: relative;
        right: 0px;
        text-align: right;
    }
/* adjust dropdown menu top offset */
    .et_header_style_centered #main-header .et_mobile_menu,
    .et_header_style_split #main-header .et_mobile_menu {
        top: 63px;
    }
}

#Conclusión

Existen otros casos en los que tenemos que hacer uso de CSS, seguro. Lo ideal es aprender a usar el código para resolver los problemas que van surgiendo. Pero también hay alternativas si no somos programadores. Saber buscar. Es más importante de lo que pensamos. Buscar, probar, equivocarse, volver a equivocarse. Y al final, cuando obtienes resultados positivos, la satisfacción es también importante. No dejes de practicar. Equivócate las veces que sean necesarias. Pero mientras tanto, aquí te dejo el vídeo. Si te ha gustado, comparte.