Diseñar un navbar que funcione perfectamente en dispositivos móviles es uno de los pasos más importantes al construir un sitio web profesional. Webflow ofrece herramientas integradas que facilitan este proceso, y conocer cómo aprovecharlas marca la diferencia entre una experiencia de usuario fluida y una que ahuyenta visitantes.
¿Cómo funciona el navbar de Webflow en dispositivos móviles?
Webflow incluye un elemento de navbar predefinido que se adapta automáticamente según el tamaño de pantalla. En tablets y dispositivos más pequeños, este componente oculta los enlaces de navegación y los reemplaza con un menu button [1:14]. Sin embargo, el aspecto por defecto no es visualmente atractivo: el ícono del botón aparece oscuro sobre fondos oscuros y el menú desplegable tiene un color gris poco estético.
Para visualizar y editar el menú desplegable en el Webflow designer, es necesario seleccionar el menu button, abrir los element settings y hacer clic en el botón show [1:31]. Esto permite ver exactamente cómo se desplegará el menú en dispositivos móviles.
¿Cómo personalizar el botón de menú y su posición?
El primer ajuste consiste en asignar una clase al menu button y cambiar el color del texto a blanco para que el ícono sea visible sobre fondos oscuros [1:52]. A continuación, se necesita reposicionar el botón hacia la derecha de la barra de navegación.
Para lograrlo, se trabaja con Flexbox en el navbar container:
- Seleccionar el navbar container y aplicar la propiedad justify con valor space between [2:12].
- Seleccionar el brand element (que contiene el logo) y cambiar su flex child sizing a large [2:30].
Esto distribuye los elementos hacia los extremos del contenedor, colocando el logo a la izquierda y el botón de menú a la derecha.
¿Cómo diseñar el menú desplegable con los colores correctos?
Al abrir el menú desplegable, Webflow asigna por defecto un fondo gris. Para cambiarlo:
- Seleccionar el menu button y asignarle el color de fondo verde oscuro del diseño [2:52].
- Seleccionar el nav menu (contenedor de los enlaces) y aplicar el mismo color de fondo.
Un detalle importante es el manejo de los estados del selector (states). Webflow permite configurar diferentes apariencias para hover, pressed y open. Si el color no se aplica correctamente, es posible que se esté editando el estado incorrecto. En este caso, fue necesario seleccionar el pressed state desde el dropdown del selector para eliminar el gris predeterminado [3:16].
Además, para lograr coherencia visual, se debe aplicar el mismo color de fondo al elemento navbar más externo, eliminando la transparencia del área superior [3:43].
¿Cómo alinear los enlaces de navegación con el logo?
Para que los nav links queden alineados correctamente:
- Seleccionar el nav menu y configurar el flex child sizing en don't shrink or grow [4:14]. Esto permite definir un ancho específico.
- Asignar un ancho del 90% y centrar el contenedor [4:22].
- Agregar padding para dar espacio entre el contenido y el botón de menú [4:31].
- Usar Flexbox justify alineado a la izquierda junto con text align a la izquierda para posicionar el botón de acción correctamente [4:37].
¿Qué ajustes adicionales se necesitan en vista de teléfono móvil?
Al cambiar a la vista de mobile phone en el responsive toolbar, pueden aparecer detalles que requieren corrección. Un problema común es que el fondo del menú tenga opacidad parcial. Para solucionarlo, se ajusta el alpha channel a 100 en el color de fondo, logrando un color sólido [5:05].
Finalmente, en móviles puede ser conveniente eliminar el espaciado lateral y configurar el nav menu al 100% de ancho para aprovechar toda la pantalla [5:15].
Estos ajustes garantizan que la navegación sea limpia, profesional y completamente funcional en cualquier dispositivo. Si encuentras dificultades al implementar alguno de estos pasos, comparte tu experiencia en los comentarios para resolver dudas juntos.
