Body content overlapping navbar while scrolling - html

Question

I am facing an error while scrolling page, body contents overlaps the navbar.
I have content over navbar that should disappear when scrolling, it is working fine.
While scrolling navbar should be fixed, this is working fine.
Problem is while scrolling, body contents are sliding over navbar. It should go from behind the navbar.
I have an image slider below navbar
Here is the code of HTML file:
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<div class="row">
<div class="col-sm-4" style="background-color:yellow; width:200px">
<img class="img-responsive img-rounded pull-left" src="img/logo 1.png" alt="Chania" width="200" height="200">
</div>
<div class="col-sm-4" style="background-color:pink;">
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<div class="col-sm-4 text-right" style="background-color:yellow;width:200px;">
<img class="img-responsive img-rounded pull-right" src="img/logo 2.png" alt="Chania" width="200" height="200">
</div>
</div>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
menu name..
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</div>
</nav>
CSS code of navbar:
.affix {
top: 0;
width: 100%; }
.affix + .container-fluid {
padding-top: 70px; }
CSS code for Slider
html, body {
height: 100%;}
.carousel, .item {
height: 70%; }
.carousel-inner {
height: 143%; }
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover; }
I am beginner in bootstrap.
Thanks.

Answer 1

You should put this in a fiddle but off the bat I would guess that your navbar should contain position:absolute; and z-index:1;

Answer 2

On seeing this query i have made jsfiddle for you just check it.. You are using affix for fixing navbar.
so in css just add the followings:
.affix{
width:100%;
top:0px;
}
And check with the z-index of your navbar keep high value for nabvar like z-index:9999;
JSfiddle link
All the coding looks good no issue with that. Just check my fiddle

Answer 3

Adding margin-top:30px; in the main Container would do what you are asking.