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.