introducción

Las nuevas tendencias web respecto a versiones móviles nos dicen que es muy cómodo tener una barra superior en HTML fija, de esta manera tenemos muchísima pantalla para cargar nuestro contenido y ocupamos un mínimo para menús.

Evidentemente todo esto también es exportable a cabecera fija en HTML y css, menú fijo superior en HTML y css o como lo quieras llamar.

Crear una barra superior fija con CSS y HMTL es realmente sencillo solo necesita 3 líneas de código css, así de simple el resto es para decorar como se puede ver en esta demo y puedes descargar desde este link

Preparando el código css para crear la barra superior

.barra-superior {
  width: 100%; /* esto hace que la barra ocupe el 100% del espacio*/
  position: fixed;/*esto hace que la barra quede fija donde está situada*/
  z-index: 10; /*la magia del código, hace que quede por encima del resto de elementos*/
}
/*La siguiente clase solo es para dar formato a la barra*/
/*Se le aplicara una ligera transparencia*/
/*Para dar el efecto que el texto pasa por debajo*/
.formato-barra-superior{
	 background: rgba(0,0,0,0.9); 
}

Codigo HTML para conseguir la barra superior fija

El código HTML para conseguir la barra superior fija es muy simple solo hay que tener en cuenta que hay que sacarlo del resto del flujo HTML

  <section class="wrapper barra-superior formato-barra-superior">
		<nav>
			<ul>
				<li><a href="#">opcion 1</a></li>
				<li><a href="#">opcion 2</a></li>
				<li><a href="#">opcion 3</a></li>
				<li><a href="#">opcion 4</a></li>
				<li><a href="#">opcion 5</a></li>
			</ul>
    </nav>
    </section>

Conclusión

Con estos sencillos códigos que se pueden copiar y pegar conseguirás headers y barras superiores fijas que no se moverán de esta manera tu visitante siempre tendrá disponible las herramientas necesarias para navegar cómodamente por tu web