Whenever I try to scroll the page, the body contents start overlapping with the navbar.
- I have content over the navbar that should disappear when scrolling, and it is working correctly.
- The navbar should be fixed while scrolling, and this functionality is also working fine.
- The issue arises when the body contents slide over the navbar instead of going behind it.
- There is an image slider below the navbar
Below is the HTML code:
<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 for the navbar:
.affix {
top: 0;
width: 100%; }
.affix + .container-fluid {
padding-top: 70px; }
Here's the CSS code for the 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 new to bootstrap. Thank you.