LovingRails LovingRails - 5 months ago 6
Javascript Question

How do I move this div above the bootstrap navigation bar?

I am trying to show offers above the bootstrap navigation bar but the navigation bar displays on top of the offer strip.

Here's an example:



$('.offerbutton').on('click', function () {
$('.offertop').toggleClass('active');
});

.offertop {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
.offerstrip {
height: auto;
background-color: yellow;
transition: height 0.5s;
line-height: 40px;
text-align: center;
overflow: hidden;
}
.offertop.active .offerstrip{
height: 0;
}
.offerbutton {
position: absolute;
top: 0;
right: 5px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
background-color: yellow;
color: #fff;
cursor: pointer;
}
.arrow-down {
transition: transform 0.5s;
}
.offertop.active .arrow-up{
transform: rotate(180deg)
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="offertop">
<div class="offerstrip">
some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df
</div>
<div class="offerbutton">
<i class="glyphicon glyphicon-chevron-up arrow-up"></i>
</div>
</div>


<nav class="navbar navbar-default">
<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" aria-expanded="false">
<span class="sr-only">Toggle snavigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</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">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df some content some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds
some content dffss df some content dffss
some content dffss
some content dffsssome content dffsssds cv
some content dffss df





Tried all values for position attribute but nothing seems to work. Any idea how to resolve this?

Answer

First. It's because .offertop is "position: absolute", hence it's out of the normal block flow of the page. It's there, but hidden behind the navbar. if you change it's position to "relative", it will move the navbar down.

Second. .offerstrip is shown despite the hight of .offertop is 0, because it's overflowing it. to prevent that you have to set container's (.offertop) overflow to "hidden".

Third. If you want to show the offer at pageload - you shouldn't set it's height to 0. Let it be "auto" - it's the default value.

.offertop {
  position: relative;
  overflow: hidden;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
} 

here's the fiddle