El cortafuegos de mi empresa no me deja ver tus imágenes... XD No importa. Por partes:
No me había fijado en que tienes dos divs para una sola cosa, de ahí el segundo cierre que no entendía, salvo que vayas a poner más cosas el segundo div para mi no tiene sentido (el de class="logo") y puede darte problemas, pero lo quites o no lo que si deberías de hacer es cerrar la imagen:
Código:
<div id="logo">
<a href="#lll"><div class="logo"><img src="fwl.fw.png"></img></div></a>
</div>
Otra cosa es que el <div id="navBar"> sobra completamente, simplemente añádele a <nav> el id="navBar" y te funcionará igual
El otro problema que tienes es que al posicionar algo como fixed (o absolute) se sale del flujo, es decir, para el resto de elementos es como si no estuviera. Para solucionarlo tienes que poner en el css del container de tu web (todo lo que no sea header o footer) un margin-top:tamaño_del_header.
Por último, para que el header te quede por encima del resto necesitas usar z-index y darle un valor superior al del container, (tienes que darles valores a los dos). El código vendría siendo:
Código:
.header2{
position:fixed;
z-index:10;
}
#contenido{
background-color: orange;
float: none;
clear: both;
display: none;
margin-top:50px;
z-index:3;
}
Y creo que eso es todo, si me he dejado algo avisa
Un saludo.