Diseño de Barra de Navegación Responsive en Webflow

Curso de Webflow para Crear Sitios No-code: Componentes, Layouts e Interacciones

Contenido del curso

Introducción a Webflow

Proyecto: portafolio

Interacciones en Webflow

Detalles finales

18
Optimizar y publicar tu sitio en Webflow
08:16 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:56

Diseño de Barra de Navegación Responsive en Webflow

Curso de Webflow para Crear Sitios No-code: Componentes, Layouts e Interacciones

Clase 14 de 18

Clase 14 / 18

Recursos

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.

Introducción a Webflow

Creación de un Portafolio Web en Webflow paso a paso

Creación de un Portafolio Web con Webflow

Principios de HTML, CSS y modelo de caja en diseño web

Diseño y Herramientas del Editor Webflow

Proyecto: portafolio

Construcción de la Sección Hero en Webflow

Diseño de Encabezados y Botones en Webflow

Diseño de Barra de Navegación en Webflow

Construcción de la Sección de Servicios en un Sitio Web

Creación de Colecciones CMS en Webflow para Portafolios Dinámicos

Diseño de Sección de Portafolio en Webflow CMS

Creación de la Sección Acerca de en Webflow

Creación de un Footer en Webflow para Sitios Web

Diseño Responsivo en Webflow para Todos los Dispositivos

Diseño de Barra de Navegación Responsive en Webflow

Interacciones en Webflow

Interacciones y Animaciones en Webflow: Guía Práctica

Formulario de Contacto en Webflow: Creación y Diseño Interactivo

Interacciones de Webflow: Animar Formularios Emergentes

Detalles finales

Optimizar y publicar tu sitio en Webflow

Diseño de Barra de Navegación Responsive en Webflow

Progreso del curso

Introducción a Webflow

Proyecto: portafolio

Interacciones en Webflow

Detalles finales

Recursos

Recursos