To resolve this issue, you can easily adjust the z-index of your navbar dropdown so that it appears above other elements. Simply add the following CSS: .collapse { z-index: 1000; }
Additionally, to ensure that nothing appears below the dropdown, you can set its background-color to white using this CSS:
.collapse { background-color: white }
If you need the dropdown to push elements below it downwards, you can use the following CSS: .collapse { display: block }. However, if the elements below are absolutely positioned, the method may vary.
Edit: @Marcus Petersen requested the code for implementing these changes, so here it is.
CODE:
var opened = false;
function openclose() {
if (opened == true) {
document.getElementById("openclose").innerHTML = "[Click] Open";
document.getElementById("collapse").style.height = "0%";
opened = false;
} else {
document.getElementById("openclose").innerHTML = "[Click] Close";
document.getElementById("collapse").style.height = "250px";
opened = true;
}
}
.collapseable {
width: 100%;
}
.menu {
width: 100%;
}
.collapseable p {
text-align: center;
}
.collapseable {
position: absolute; /* Change to block to move the stuff below it down */
height: 0%;
overflow-y: clip;
background-color: white;
z-index: 1000;
transition: height 0.5s linear;
}
<html>
<nav>
<button class="menu" onclick="openclose()">
<span>Menu</span>
<br>
<span id="openclose">[Click] Open</span>
</button>
<div class="collapseable" id="collapse">
<p>Menu Item 1</p>
<hr>
<p>Menu Item 2</p>
<hr>
<p>Menu Item 3</p>
</div>
</nav>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet (and then more lorem)</p>
</html>