I currently have the following overlap problem with my dropdowns:
As you can see if I press my most right button (the filter logo) and then press my dropdown link it overlaps in an ugly way. I would like that the "Dropdown link" dropdown always goes on top.
I have tried playing with the CSS (z-index, position, display, etc.) of both dropdowns, but I can't seem to figure it out. From what I understand z-index should solve my problem, but it doesn't. So that's why I went to play with position / display etc, but that didn't help either and confused me even more.
Anyone have any idea what I am doing wrong? Would really appreciate a push in the right direction. (Other random feedback on my current code is also appreciated)
My code:
https://jsfiddle.net/afbs97dy/4/
HTML:
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="https://www.test.com"><img class="logoklant" src="images/test.png" alt="Logo"></a>
<a class="navbar-brand naamdashboard" href="#">test</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto menuitems" id="myNavbar">
<li class="nav-item"><a class="nav-link" href="#page1">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="#page2">Link 2</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#test1">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="" id="filter">
<i class="fas fa-filter filterlogo"></i>
</a>
<ul class="dropdown-menu dropdownqlik">
<div id="CurrentSelections" class="qvobjects">
<div class="current-selections-placeholder">
<span>Connect to app to see Selection Toolbar</span>
</div>
</div>
</ul>
</li>
</ul>
</div>
</nav>
</body></html>
CSS:
/* navbar */
.navbar {
background-color: #3b3b3b;
font-family: Montserrat, sans-serif;
font-size: 12px !important;
letter-spacing: 4px;
}
.navbar-brand {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 5px;
}
.logoklant {
height:40px;
}
.naamdashboard {
font: 20px;
}
.filterlogo {
font-size: 32px;
margin-left: 5px;
margin-top: 2px;
padding-right: 10px;
}
.dropdownqlik {
height: 36px;
}
#filter.is-active + .dropdown-menu {
display: block;
width: 100.1%;
top:53px;
}
.is-pos-static {
position: static !important;
color: white !important;
}
#CurrentSelections {
margin-top: -8px;
margin-left:-1px;
}
/* Scroll to top */
.scrollToTop {
text-align: center;
font-weight: bold;
color: #444;
text-decoration: none;
position: fixed;
top: 95vh;
right: 1vw;
z-index: 3000;
}
.scrollToTopLogo {
color: black;
}
JS:
/* https://stackoverflow.com/questions/48243406/change-color-on-hover-and-when-navbar-toggle-is-collapsed */
$(document).ready(function(){
$("#filter").click(function(){
$(this).parent('li').toggleClass('is-pos-static');
$(this).toggleClass("is-active");
});
});
Thanks for taking your time to help.
