#navbarContentHamburger {
background-image: url(../img/657904-64.png);
background-size: contain;
z-index: 3;
position: fixed;
width: 22px;
height: 20px;
top: 7.7px;
left:8px;
}
.open {
width: 4% !important;
transition: 0.4s;
z-index: 2;
}
#sidebar {
transition: 0.4s;
position: fixed;
height: 100%;
width: 0%;
background: red;
position: fixed;
z-index: 2;
top: 0;
left: 0;
overflow: hidden;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
background-color: #0f9494;
grid-area: navbar;
box-shadow: 0 3px 28px rgba(0,0,0,0.25), 0 2px 10px rgba(0,0,0,0.22);
}
I am struggling to get the HTML element navbarContentHamburger to display above ".open" and #sidebar, despite adjusting the z-index. Any tips on how to achieve this?
The concept is to have a blue navbar with a white menu icon. When the icon is clicked, a div will overlay the page with the new navigation menu, while keeping the white icon (navbarContentHamburger) in the corner.
<div id="navbar">
<div class="navcontainer">
<div id="navbarContent">
<div id="navbarContentHamburger" @click="toggleMenu()">
</div>
<div id="navbarContentMenu">
<h4>MENU</h4>
</div>
</div>
</div>
</div>