I am currently facing an issue with a dropdown menu that I am trying to add to a WordPress site using Visual Composer. The problem arises when I attempt to place the dropdown on top of a parallax section below it. Despite setting the z-index of the parallax div to -1 !important and giving the dropdown a z-index of 99, they do not stack properly.
You can view the page where the issue occurs by scrolling down to the "WHERE TO BUY" section, which features the second set of dropdowns.
Click here to access the page
Below is the code snippet I am currently using for the custom styled dropdown menus:
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var ddid2 = $(this).attr('id');
$('.box').hide();
$('.drop-down-show-hide').hide()
$('.'+ddid2).show();
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#dd') );
var dd = new DropDown( $('#dd2') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-1').removeClass('active');
});
});