Navbar Overlaps Carousel - css

Question

I have a problem.
I made a change on a website of mine, I wanted to incorporate a full-width carousel on my website. Instead of a jumbotron.
The problem is my navbar is overlapping the jumbotron area, the caption and everything.
Here is my html:
<div class="nav-area">
<div class="container"> <!-- Start Container -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">
<img alt="dentalclean logo" src="images/logo_2x.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li class="active">Pagina Inicial <span class="sr-only">(current)</span></li>
<!-- <li>Contactos</li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- End Container -->
</div>
<span itemscope itemtype="http://schema.org/LocalBusiness">
<div class="hero-section"> <!-- Start Hero Section -->
<div id="slider_dentalclean" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider_dentalclean" data-slide-to="0" class="active"></li>
<li data-target="#slider_dentalclean" data-slide-to="1" class=""></li>
<li data-target="#slider_dentalclean" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="Dentista Leiria" src="images/hero-img.png">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>LOOOOOOOOOOOOOOOOOOOL</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img alt="Second slide" src="images/hero-img.png">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img alt="Third slide" src="images/hero-img.png">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
</div>
I apologize for the lack of organization.
I'm using sass and bootstrap by the way.
Here is the resulting problem: https://www.dropbox.com/s/bigm6291gmwgcf6/Screenshot%202015-04-06%2018.46.43.png?dl=0
Thank you very much, I searched for all the answers here, but I couldn't find one that works.
Fiddle: https://jsfiddle.net/yjbjvtx2/
CSS:
.nav-area{
position:absolute;
top: 0;
}
#slider_dentalclean{
margin-top: 0;
z-index: -1;
}
I have found the exact thing I want in my website: http://getbootstrap.com/examples/carousel/
But I don't understand how they make the carousel caption not go behind the navbar.

Answer 1

Why not just add a top margin to your .hero-section?
.hero-section{
margin-top:5em;
}
Or remove the negative margin on the #slider_dentalclean?
#slider_dentalclean{
/*margin-top: -73px;*/
z-index: -1;
}
I pulled in the carousel.CSS from the example you mentioned. Make sure you are including the bootstrap.js too. I updated the fiddle below with these two files included and put one of your slides in the template.
I am not 100% sure it works as you expect, as I cannot see dropbox files, so your image doesn't show up. Maybe add one to imgr or substitite a demo image from google or getty.
https://jsfiddle.net/joshvito/o8zqyt06/ UPDATED