Arreglando su menú de navegación receptivo en Divi

Crear un menú de navegación receptivo que se vea genial en todos los tamaños de pantalla puede ser difícil. Desearía que no fuera tan importante, pero dado que la navegación normalmente se encuentra en la parte superior de cada página de su sitio, es lo que está visible primero en cada página. Por eso es importante hacerlo bien. Afortunadamente, el personalizador de temas de Divi te permite personalizar el menú principal con algunas opciones de encabezado bastante interesantes. Pero para el estilo de menú predeterminado con el logotipo a la izquierda y los enlaces del menú a la derecha, las cosas se pueden cambiar fácilmente en tamaños de pantalla más pequeños, especialmente cuando hay demasiados enlaces en el encabezado. Sé que me pasa mucho. Obtengo el menú con un aspecto perfecto para el escritorio y luego lo verifica en una tableta (especialmente un iPad Pro) y el logotipo se superpone al menú y algunos de los enlaces han saltado una línea.

Hoy, le daré algunas soluciones útiles para esos menús de navegación abarrotados para que se vean bien incluso en esos tamaños de pantalla no tan comunes. Después de todo, al menos para algunos usuarios, la credibilidad de su sitio depende de ello.

Empecemos.

Arreglando su menú de navegación receptivo en Divi

Suscríbete a nuestro canal de Youtube

Cuatro soluciones para un menú de navegación abarrotado

Una de las mejores cosas de Divi es que se basa en un diseño de cuadrícula fluido que utiliza consultas de medios (CSS compartimentado) para ajustar el estilo de su sitio para diferentes tamaños de pantalla. El punto en el que se realizan estos ajustes es lo que llamamos puntos de interrupción. Si está comprometido a perfeccionar su menú de navegación principal en TODOS los tamaños de pantalla, es probable que deba personalizar su menú mediante consultas de medios y ajustar ciertos puntos de interrupción.

El problema

El problema más común con el que me encuentro al usar el menú de navegación predeterminado de Divi es cuando un cliente quiere muchos elementos de menú de nivel superior. Tener más de 5 elementos de menú (o tener elementos de menú con un tamaño de fuente grande) en el menú de navegación principal a menudo creará un salto de línea y un logotipo ampliado cuando el tamaño de la pantalla alcance un ancho entre 980-1100 píxeles (el tamaño de las computadoras portátiles pequeñas y tabletas grandes). Estoy seguro de que ha tenido este problema antes, incluso si nunca lo notó. Se parece a esto:

No es ideal. Entonces, veamos cuatro soluciones a este problema.

Solución n. ° 1: hacer que la barra de menú sea de ancho completo

Normalmente, no sugeriría hacer que su menú de navegación sea de ancho completo a menos que también esté haciendo que el resto de mi sitio sea de ancho completo. Creo que la coherencia en el diseño es importante. Pero a veces es un buen compromiso si significa que su menú de navegación se ve muy bien en todos los dispositivos. Y también es una solución simple.

Vaya a Personalizador de temas> Encabezado y navegación> Barra de menú principal y seleccione Hacer ancho completo .

Solución n. ° 2: ajuste la configuración del logotipo y la fuente.

Otra solución simple a su problema es usar la configuración del personalizador de temas para ajustar las opciones predeterminadas de Altura máxima del logotipo, Tamaño de texto o Fuente.

Tenga cuidado al ajustar estas opciones porque nunca querrá comprometer el diseño y la legibilidad de su logotipo o elementos del menú por el simple hecho de hacer una solución fácil.

Solución n. ° 3: mostrar el menú móvil en un nuevo punto de interrupción.

Estos son los rangos generales para cada uno de los puntos de interrupción dentro de Divi:

Escritorio grande: 1405px y superior
Escritorio estándar: entre 1100px y 1405px
Computadoras portátiles y tabletas grandes: entre 980px y 1100px
Tabletas: entre 768px y 980px
Teléfonos inteligentes y tabletas pequeñas: entre 320px y 768px;
Smartphones: entre 320px y 480px;

El punto de interrupción en el que el menú de navegación predeterminado se convierte en el menú móvil (con el navegador de hamburguesas) es 980px. Cualquier tamaño de pantalla inferior a 980px mostrará el menú móvil.

Pero, si desea evitar saltos de línea de menú extraños, cambie el punto de interrupción a un valor diferente. Supongamos que desea mostrar el menú móvil en aproximadamente 1024 px en lugar de 980 px. Para hacer esto, necesitaría insertar un CSS personalizado dentro de una consulta de medios para anular el estilo predeterminado en Divi.

Vaya a Personalizador de temas > CSS adicional e ingrese lo siguiente:

@media (max-width: 1024px) {
 #et_mobile_nav_menu {
 display: block;
 }

#top-menu {
 display: none;
 }
 }

Esta consulta de medios hace dos cosas. Oculta el menú normal y muestra el menú móvil en el punto de interrupción de 1024px.

Solución n. ° 4: ajuste del estilo del menú en un determinado punto de interrupción

Esta solución es probablemente la mejor opción porque le permite tener el mayor control sobre su menú en ciertos puntos de interrupción. Puede orientar los elementos de su menú utilizando su clase css para crear un estilo personalizado en su consulta de medios.

Aquí está el CSS predeterminado de Divi para los elementos de su menú:

#top-menu li {
    display: inline-block;
    padding-right: 22px;
    font-size: 14px;
}

Supongamos que desea que el tamaño de fuente de su menú sea de 18 px de forma predeterminada, pero desea que cambie a 14 px en un cierto punto de interrupción. Y para ahorrar aún más espacio, puede reducir el relleno a 15 px en lugar de 22 px. Puede hacer esto apuntando a la clase css para todos los elementos del menú y creando una consulta de medios

Vaya a Personalizador de temas> CSS adicional e ingrese lo siguiente:

@media (max-width: 1200px) {
 #top-menu li, #top-menu li a {
 font-size: 14px;
 padding-right: 15px;
 }
 }

Lo que hace este CSS es cambiar el tamaño de fuente a 14px y el relleno derecho a 15px en cualquier pantalla de 1200px o menos. Esto crea una transición suave al ajustar el tamaño de la pantalla en el escritorio y le permite mantener su navegación predeterminada en tabletas grandes y computadoras portátiles pequeñas.

Ajustar otros estilos de encabezado

Hay cinco estilos de encabezado para elegir dentro del Personalizador de temas de Divi (sin contar la navegación vertical). Los cinco estilos incluyen Predeterminado (el que ya se abordó en esta publicación) Deslizante, Pantalla completa, Centrado y Logotipo en línea centrado.

Estilos deslizantes y de pantalla completa

Si el diseño de su sitio web requiere estilos de diapositiva o de pantalla completa, entonces su menú receptivo es prácticamente infalible, ya que el ícono de hamburguesa de navegación móvil se usa para activar el menú en todos los tamaños de pantalla.

Estilo centrado

Si está usando el estilo centrado, tiene más espacio para que los elementos del menú respiren, pero si aún necesita más espacio, puede usar las mismas soluciones personalizadas que usamos para el estilo predeterminado para que se vea como usted desea.

Estilo de logotipo en línea centrado

Por último, el encabezado de estilo de logotipo en línea centrado es un poco complicado de conseguir desde el principio. Debe hacer algunas cosas bien si desea que el logotipo esté centrado en la página. Primero, debe tener un número par de elementos de menú para que el logotipo del medio siga siendo la pieza central.

En segundo lugar, la cantidad de texto que utilice para cada elemento del menú determinará el punto central del logotipo. Si tiene más texto en un lado, el logo estará un poco más lejos. Esto no es un gran problema para la mayoría de las situaciones, pero si tiene un encabezado con elementos centrados directamente debajo del logotipo, este puede ser un problema obvio que deberá rectificar.

Observe cómo el logotipo está un poco descentrado en el menú en comparación con el logotipo centrado en la sección del encabezado.

Ahora voy a acortar la etiqueta del elemento del menú "Elementos de información" a "Información". Ahora mire cómo el logo se desplaza más hacia el centro.

Esta solución puede ser todo lo que necesita para obtener el logotipo donde lo desee. Es posible que pueda salirse con la suya cambiando algo como "Acerca de nosotros" a "Acerca de" o viceversa para hacer esos pequeños ajustes.

Pero esto puede resultar un poco frustrante si eres un perfeccionista (puedo tener mis momentos de ello. Créame). Por lo tanto, hay un nivel más profundo de personalización que puedes hacer si quieres hacer aún más ajustes. En lugar de ajustar el texto real en el elemento del menú para ajustar el punto central del logotipo, puede agregar una clase CSS personalizada a cualquier elemento y darle algo de relleno a la derecha o izquierda. Esto debería darle el último empujón que necesita para centrar las cosas.

Desde el panel de WordPress, vaya a Apariencia> Menús y asegúrese de tener las Clases CSS marcadas en el área Opciones de pantalla.

Luego, abra el elemento del menú al que le gustaría apuntar. Luego ingrese una clase CSS en el cuadro de entrada Clases CSS. Estoy llamando al mío "empujón".

Después de eso, vaya a Divi> Personalizador de temas> CSS adicional y agregue el siguiente CSS personalizado:

#top-menu li.nudge  {
padding-right: 32px;
}

Con este CSS, solo el elemento con la clase "nudge" recibe un relleno derecho de 32px; Eso empuja el logo lo suficiente para centrarlo.

¡Eso es todo!

Pensamientos finales

Divi hace que la creación de sitios web sea divertida y sencilla. Pero a veces, las demandas del trabajo (y de nuestros clientes) requieren que hagamos un esfuerzo adicional para asegurarnos de que nuestros sitios sean estelares. Y lo que distingue a los buenos sitios de los grandes son los pequeños detalles. La forma en que funciona su menú de navegación receptivo es uno de esos detalles importantes que desea acertar. La mayoría de las veces es lo primero que sus usuarios verán y con lo que interactuarán en cada página de su sitio. Un menú que parece roto puede dejar una mala primera impresión. Espero que esta publicación te ayude a "empujarte" en la dirección correcta (lo siento, no pude evitarlo :)).

Estoy seguro de que hay más problemas y soluciones que no abordé en esta publicación. No dudes en publicarlos en los comentarios. Espero escuchar de usted.

¡Salud!