Trying to show a menu when a bars icon is clicked, the bars icon is a label for a checkbox. the checkbox is checking and unchecking but my css isn’t being applied.
I’ve done this before, a while ago. Can’t seem to see what’s wrong.
Any ideas?
[code]
<style>
.mobile{
color: #FFF;
line-height: 126px;
font-size: 3em;
right: 15px;
position: absolute;
}
.mobileMenuDisplay{
position: absolute;
left:0;
top: 126px;
width: 100%;
height: 0;
}
#mobileMenu:checked ~ .mobileMenuDisplay{
position: absolute;
left:0;
top: 126px;
width: 100%;
height: 100vh !important;
background-color: #000;
z-index:50;
}
</style>
<div class=”mobile”>
<input id=”mobileMenu” type=”checkbox”>
<label for=”mobileMenu”>
<i class=”fas fa-bars”></i>
</label>
</div>
<div class=”mobileMenuDisplay”>
<ul>
<li>test</li>
</ul>
</div>