I'am using bootstrap dropdown menu and https://github.com/wilddeer/stickyfill to fix some elements on the top of the screen. See jsfiddle.
I could not achieve, that the dropdown menu appers over the "sticky line". I've tried with z-index wothout success.
Instead of stickyfill I've tried with other sticky plugins (makefixed.js, jquery.sticky.js) but the result is the same. The menu is always behind the sticky element.
Any idea?
The HTML code (the same as on jsfiddle):
$(function() {
$(".sticky").Stickyfill();
});<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://www.diet-health.info/js/stickyfill.js"></script>
<header class="sticky" style="padding:3px;top:0px">
<div class="dropdown btn-group" style="float:right;">
<button id="right-menu" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Right Menu</button>
<ul class="dropdown-menu pull-right" aria-labelledby="right-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</div>
</header>
<div class="clearfix"></div>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<div class="sticky" style="top:40px">
<p>
********************************************* A sticky line *********************************************
</p>
</div>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>