Crear un menú de navegación receptivo que se vea bien 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 primero que se ve 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 de menú a la derecha, las cosas pueden mezclarse fácilmente en tamaños de pantalla más pequeños, especialmente cuando tiene demasiados enlaces abarrotando el encabezado. Sé que me pasa mucho. Obtengo el menú que se ve bien para el escritorio y luego lo revisas 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, les 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 tu sitio depende de ello.
Empecemos.
Suscríbete a nuestro canal de Youtube
Una de las mejores cosas de Divi es que se basa en un diseño de cuadrícula fluida 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 ruptura. Si está comprometido a perfeccionar su menú de navegación principal en TODOS los tamaños de pantalla, es probable que necesite 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 cuando uso 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 y 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 ve algo como esto:
No es ideal. Así que veamos cuatro soluciones a este problema.
Normalmente, no sugeriría hacer que el menú de navegación sea de ancho completo a menos que también esté haciendo el resto de mi sitio de ancho completo. Creo que la consistencia 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 es una solución simple también.
Vaya a Personalizador de temas > Encabezado y navegación > Barra de menú principal y seleccione Hacer ancho completo .
Solució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 del texto o Fuente.
Tenga cuidado al ajustar estas opciones porque nunca querrá comprometer el diseño y la legibilidad de su logotipo o los elementos del menú en aras de hacer una solución fácil.
Estos son los rangos generales para cada uno de los puntos de interrupción dentro de Divi:
Escritorio grande: 1405 px y superior
Escritorio estándar: entre 1100 px y 1405 px
Laptops y tabletas grandes: entre 980 px y 1100 px
Tablets: entre 768 px y 980 px
Smartphones y tabletas pequeñas: entre 320 px y 768 px;
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 la navegación de hamburguesas) es de 980 px. Cualquier tamaño de pantalla inferior a 980 px 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 alrededor de 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:
|
01
02
03
04
05
06
07
08
09
|
@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 1024 px.
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ú:
|
01
02
03
04
05
|
#top-menu li { display: inline-block; padding-right: 22px; font-size: 14px;} |
Digamos 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 punto de interrupción determinado. 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:
|
01
02
03
04
05
06
|
@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 14 px y el relleno derecho a 15 px en cualquier pantalla de 1200 px 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.
Ajuste de 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 mencionó 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 deslizantes o de pantalla completa, entonces su menú receptivo es bastante 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 de la manera que 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 entender 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 logotipo se desviará un poco. 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, esto puede ser un problema obvio que deberá corregir.
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 de menú «Elementos de información» a «Información». Ahora mira 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 desea. 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 volverse un poco frustrante si eres un perfeccionista (puedo tener mis momentos de eso. Créeme). Entonces, 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 a la izquierda. Esto debería darte el último empujón que necesitas para centrar todo.
Desde el tablero de wordpress, vaya a Apariencia > Menús y asegúrese de tener Clases de CSS marcadas en el área de Opciones de pantalla.
Luego, alterna para abrir el elemento del menú al que te gustaría apuntar. Luego ingrese una clase CSS en el cuadro de entrada Clases CSS. Estoy llamando a la mía «empujón».
Después de eso, ve a Divi > Personalizador de temas > CSS adicional y agrega el siguiente CSS personalizado:
|
01
02
03
|
#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 logotipo lo suficiente como para centrarlo.
¡Eso es todo!
Pensamientos finales
Divi hace que la creación de sitios web sea fácil y divertida. 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 separa 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 corregir. 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. Siéntase libre de publicarlos en los comentarios. Espero escuchar de usted.
¡Salud!