I am facing an issue with a drop down menu in a nav-bar. The problem occurs when the drop down menu goes behind a fixed-position div below the nav-bar. I have tried using z-index but it doesn't seem to be working. Setting the position of the dropdown menu as "fixed" also did not resolve the issue.
Here is a snippet of my code:
.dropdownmenu{
background-color : #333;
opacity : 0.95;
z-index : 9999;
}
The HTML code for the navbar with the drop down menu is as follows:
<li class="dropdown">
<a href="#" class="dropdown-toggle" id="drop" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<strong>
<%= session['user-session']%>
</strong>
<span class="caret"></span>
</a>
<ul class="dropdown-menu drop">
<li><a href="#">My Posts</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><%= link_to "Logout","/users/logout"%></li>
</ul>
</li>
The JavaScript code used is:
$(document).scroll(function ()
{
var scroll = $(this).scrollTop();
var topDist = $("#navbar").position();
if (scroll > topDist.top) {
$('.navbar').css({"position":"fixed","width":"100%","z-index":"1"});
if($('#search').css("position") == "fixed"){
$('#search').css({"position":"fixed" , "marginTop":"80px"});}
}
else if (scroll == topDist.top) {
$('.navbar').css({"position":"fixed","width":"100%","z-index":"1"});
if($('#search').css("position") == "fixed"){
$('#search').css({"position":"fixed" , "marginTop":"0px"});
$('.navbar').css({"position":"static","top":"auto"});}
}
else {
$('.navbar').css({"position":"static","top":"auto"});
}
});
The ID #search corresponds to the fixed div located below. The menu overlaps this div causing it to hide. Here is the code for the search div:
<div class="col-sm-4" id="searchDiv">
<div class="panel panel-default serachpanel" id="search" style="height:83%;position: fixed; overflow-y: scroll;z-index: -1;">
<div class="panel-heading">Search Persons</div>
<div class="panel-body">
<div class="form-group">
<p>To optimize your search rresults,provide picture of </p>
<p>person with a clear face to do search by picture.</p>
<div class="row">
<div class="col-md-1">
<div id="image-holder"></div>
</div>
</div>
<input id="fileUpload" type="file" class="btn-success"/>
</div>
<div class="row">
<div class="col-md-12">
<label>Enter Date and Time You want to search from:</label>
<input type="datetime-local" class="form-control" />
</div>
</div>
............