I'm having a little problem with the well known CSS checkbox trick. I am trying to make a responsive nav bar.
I have used it before, and it worked before, but now even if I copy the old code that worked before, now it just simply doesnt work.
Here is the code I have made:
.hamburger {
width: 35px;
height: 40px;
}
.responsive-nav-div {
position: absolute;
left: -100%;
width: 100%;
}
.responsive-nav~.responsive-nav-div {
left: 0px;
}<div class="main-nav-div">
<div class="nav-div-1">
<ul class="nav-ul">
<li class="nav-li"><a class="nav-a" href="index.php">HOMEPAGE<a/></li>
</ul>
</div>
<div class="nav-div-2">
<ul class="nav-ul-2">
<li class="nav-li"><a class="nav-login-register" href="login.php">LOGIN<a/></li>
</ul>
</div>
</div>
<div class="responsive-nav-main-div">
<label for="responsive-nav" class="responsive-nav-label"><img class="hamburger" src="images/hamburger2.png" alt="Responsive-NAV"></label>
<input type="checkbox" id="responsive-nav" class="responsive-nav">
<div class="responsive-nav-div">
<ul class="responsive-nav-ul">
<li class="responsive-li2"><a class="responsive-a2" href="index.php">HOMEPAGE<a/></li>
<li class="responsive-li2"><a class="responsive-a2" href="login.php">LOGIN<a/></li>
</ul>
</div>
</div>When I click on the checkbox or the hamburger icon (the label), it just simply doesnt apply left: 0px;. And this is so annoying, im trying to get this to work for like 3 hours now, what am I missing?
And before you ask, yes I have cleared the web browser cache just in case.
I don't really intend to use javascript for that hack that worked before, so please dont suggest javascript!
Any help related to the :checked attribute would be helpful, thanks :D!