Barra de navegación responsive (Mobile first)
¡Hola chicos! Vamos a arrancar con un ejemplo de una barra de navegación responsive, usando Mobile First. Código básico de la barra de navegación: Puntos importantes en el estilo CSS: Contenedor header: display: flex y justify-content: space-between . Para ubicar en extremos opuestos al logo y a la barra de navegación. Contenedor nav: ul : display: none , ya que la idea es hacerlo mobile first, la lista de navegación se visualizará cuando se pase el mouse por arriba o se haga click en el botón del menú. Vista de escritorio: Dos cosas importantes a hacer ahora son: Ocultar el botón del menú (.menu-button) con diplay:none Ahora sí, visualizar la lista con los links de navegación con display:block. Todo esto, por supuesto, dentro de un @media query. See the Pen nav con flex by tognola ( @tognola ) on CodePen . Paso siguiente Ahora queda dar funcionalidad al menú hamburguesa (sólo con css), ver en este post .