Estoy tratando de crear una web, con la cual ya me ayudaron compañeros como @Camilo Vasquez y @alexchvrches . Se va complicando la cosa y mis dudas. Trato de dejar siempre visible la barra de navegación en la parte superior, pero al hacer scrool esta desaparece. Hay forma de dejarla visible, que al abrir la pagina fuera un poco mas alta y al hacer scroll, permaneciera siempre visible, con una altura como la que muestra ahora. Otra cosa que no he conseguido despues de varios pruebas de documentación que busque, es hacer desaparecer el pequeño espacio entre esta barra y el body. Tiene muchos mas fallos, pero sigo intentando resolverles yo. Dejo la muestra del código. Gracias.
html, body {
height:100%;
margin:0px;
color:#444444;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
font:400 16px/1.8 sans-serif;
}
.nav-navbar-nav{
font-size: 8;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position:relative;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;
}
.bgimg-1 {
background-image:url("http://i64.tinypic.com/2jb5fs4.jpg");
height:100%;
}
.bgimg-2 {
background-image:url("bg_02.jpg");
height:100%;
}
.bgimg-3 {
background-image:url("bg_03.jpg");
height:100%;
}
.caption {
position:absolute;
left:10%;
top:48%;
width:80%;
margin:auto;
color:#FFFFFF;
font-size:24px;
text-align:center;
letter-spacing:10px;
background-color:#444444;
}
h2 {
text-transform:uppercase;
font:20px sans-serif;
letter-spacing:4px;
color:#444444;
}
a {
text-decoration:none;
letter-spacing:3px;
}
.navbar-nav{
margin-left: 5% !important;
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>PRINCIPAL</title>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width">
<!-- ESTOS ENLACES LES TENGO GRACIAS A Camilo Vasquez me sugirio para crear barra de navegacion-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="todo.css" type="text/css" rel="stylesheet">
</head>
<!-- AQUI TAMBIEN FORMO PARTE Camilo Vasquez AYUDANDO ME CON LOS BOTONES DE LA BARRA DE NAVEGACION-->
<body>
<header id="header">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-fire"></span>
MIGUEL ESPESO
</a>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Principal</a>
</li>
<li>
<a href="#">Sobre mi</a>
</li>
<li>
<a href="#">Estudios</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOBRE MI
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">ESTUDIOS</a>
</li>
<li>
<a href="#">APLICACIONES</a>
</li>
<li>
<a href="#">Diseño</a>
</li>
</ul>
</li>
</ul>
<!-- Search -->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">Buscar</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<div class="bgimg-1">
<div class="caption">
<span>DALE AL SCROLL</span>
</div>
</div>
<div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
<h2 style="text-align:center;">CURRICULUM</h2>
<h1>BIENVENIDOS A MI SITIO WEB...</h1>
<p>Hola, me llamo Miguel y os voy a presentar mi sitio web, el cual estoy creando mientras realizo un curso de actívate.
En principio esta creado para mostrar mi perfil, experiencia laboral, formación académica y todos los conocimientos que
vaya adquiriendo en el curso. </p>
</div>
<div class="bgimg-2">
<div class="caption">
<span>100% HEIGHT</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#FFFFFF;background-color:#444444;text-align:center;padding:48px 80px;text-align:justify;">
<p>ESTO IRA MEJORANDOSE, SEGUN VAYA EXPERIMENTANDO</p>
</div>
</div>
<div class="bgimg-3">
<div class="caption">
<span>MAS IMAGENES</span>
</div>
</div>
<div style="position:relative;">
<div style="color:#444444;background-color:#FFFFFF;text-align:center;padding:48px 80px;text-align:justify;">
<p>AQUI PONDRE IMAGENES, CUANDO VAYA APRENDIENDO</p>
</div>
</div>
<div class="bgimg-1">
<div class="caption">
<span>¡DIVERTIDO, EH!</span>
</div>
</div>
</body>
</html>