DWFS

Display La propiedad CSS display especifica si un elemento es tratado como un elemento: block : hace que el comportamiento del elemento sea como un bloque. inline : el elemento se renderizará en línea con otros elementos. inline-block :  fluyen con el texto y demás elementos como si fueran elementos en-línea y además respetan el ancho, el alto y los márgenes verticales.

¡Hola chicos!  Una vez armada nuestra barra de navegación responsive, ir al post , vamos a ver como armar un menú hamburgues básico sólo con CSS. HTML Arranquemos con el código básico para el menú: < nav >    < input   type = "checkbox"   id = "menu" >    < label   for = "menu" >  Menu  </ label >    < ul >      < li > Link 1 </ li >      < li > Link 2 </ li >      < li > Link 3 </ li >      < li > Link 4 </ li >    </ ul > </ nav > A tener en cuenta: Asignar un id al input.  <input type="checkbox"   id="menu"   > Hacer referencia al id del input en el for  del label. <label for="menu" > Menu </label> CSS Ahora con CSS, vamos a dar la funcionalidad a nuestro menú: Ocultamos la lista de navegaci...

¡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 .