I want to build a responsive mobile friendly login page with the checkbox method.
But I'm stuck on this problem, how can I select the element in this case, with the ~ sign its not working.
HTML:
<body>
<nav>
<div class="mainNav">
<input type="checkbox" id="res-menu"></input>
<label for="res-menu">
<i class="fa fa-bars" id="sign-one"></i>
<i class="fa fa-times" id="sign-two"></i>
</label>
<a id="logo">WP</a>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
</ul>
</nav>
CSS:
.mainNav #res-menu:checked ~ ul {
left: 0;
}
Aucun commentaire:
Enregistrer un commentaire