para lograr eso tienes que realizar 2 tareas sencillas
1 - Esconder por defecto el header (navbar)
2 - Detectar el scroll de la pagina con js para mostrar/ocultar el header
Esta es la pequeña funcion JS que detecta la posicion del scroll y muestra/esconde el header
<script type="text/javascript">
var BodyScroll = function () {
if($(document).scrollTop() != 0)
$("#header").css("display","block");
else
$("#header").css("display","none");
}
</script>
Tambien te he comentado en el css que es mejor usar el background de un elemento que un elemento img para los carrousel, pero ambas funcionan igual de bien, eso depende de como quieras usar tu plantilla y en que entorno se encuentra.
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);
body, html {
width: 100%;
height: 100%;
}
body {
background: #fff;
font-family:'Open Sans', Arial, sans-serif;
color:#333;
line-height:1.6em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:500;
font-family:'Open Sans', Arial, sans-serif;
color:#333;
}
h1{
font-size: 36px;
color:#fff;
}
h2{
font-size: 20px;
}
h3{
font-size: 16px;
color: #787878;
font-weight: 400;
line-height: 24px;
}
/*Tienes que indicar una altura fija para que al cambiar de imagen el carrousel no se dimensione*/
.carousel-inner{
height: 500px;
}
/*Para centrar las imagenes en el carrousel como imagenes que ocupan el 100% de la pagina, debes de sobreescribir la clase img-responsive de bootstrap*/
.carousel-inner .item img {
width: 100% !important;
height: 500px !important;/*Misma altura que carousel-inner*/
}
/* Yo te recomiendo que antes que usar el elemento img, uses un div y le pongas background-image: url(http://xxx); bacground-position: center; bacground-repeat: no-repeat; background-size: cover; */
/*Esconder header por defecto*/
#header {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gp Bootstrap Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- Para usar bootstrap debes de usar jquery-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Hay que detectar el scroll del body y mostrar/esconder el #header segun la posicion del scroll -->
<script type="text/javascript">
var BodyScroll = function () {
if($(document).scrollTop() != 0)
$("#header").css("display","block");
else
$("#header").css("display","none");
}
</script>
</head>
<body class="homepage" onscroll="BodyScroll()">
<div class="slider">
<div class=""><!-- Container te añade una mida fija y los margenes, por eso tus probleams-->
<div id="about-slider">
<div id="carousel-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators visible-xs">
<li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
<li data-target="#carousel-slider" data-slide-to="1"></li>
<li data-target="#carousel-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src= "https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA5OS83NTgvb3JpZ2luYWwvc3RhcnMtdW5pdmVyc2UuanBn" class="img-responsive" alt="">
</div>
<div class="item">
<img src= "http://blogs.discovermagazine.com/crux/files/2017/06/universe.jpg" class="img-responsive" alt="">
</div>
<div class="item">
<img src= "https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2017/neutrinofaci.jpg" class="img-responsive" alt="">
</div>
</div>
<a class="left carousel-control hidden-xs" href="#carousel-slider" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class=" right carousel-control hidden-xs" href="#carousel-slider" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
<!--/#carousel-slider-->
</div>
<!--/#about-slider-->
</div>
</div>
<header id="header">
<nav class="navbar navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Gp.</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div>
<!--/.container-->
</nav>
<!--/nav-->
</header>
<!--/header-->
<!-- añadir height a la pagina para probar scroll -->
<div style="height: 2000px">
</div>
</body>
</html>