Responsive navbar

how can I manipulate the left-nav class when checkbox in responsive-nav class is checked.
<div class="nav-links">
<div class="brand">
<a href="index.html"><img src="./images/logo.png" alt="Netflix Logo" class="logo"></a>
</div>

<ul class="left-nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Tv Shows</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">New & Popular</a></li>
<li><a href="#">My List</a></li>
</ul>
<ul class="right-nav">
<li><a href="#"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></a></li>
<li><a href="#"><i class="fa-solid fa-bell"></i></a></li>
<li><a href="#"><img src="./images/netflix-avatar.png" alt="Profile Image" class="avatar"></a>
</li>
</ul>
<div class="responsive-nav">
<input type="checkbox" id="check">
<label for="check"><i class="fa-solid fa-bars"></i></label>
</div>
</div>
<div class="nav-links">
<div class="brand">
<a href="index.html"><img src="./images/logo.png" alt="Netflix Logo" class="logo"></a>
</div>

<ul class="left-nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Tv Shows</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">New & Popular</a></li>
<li><a href="#">My List</a></li>
</ul>
<ul class="right-nav">
<li><a href="#"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></a></li>
<li><a href="#"><i class="fa-solid fa-bell"></i></a></li>
<li><a href="#"><img src="./images/netflix-avatar.png" alt="Profile Image" class="avatar"></a>
</li>
</ul>
<div class="responsive-nav">
<input type="checkbox" id="check">
<label for="check"><i class="fa-solid fa-bars"></i></label>
</div>
</div>
16 Replies
roelof
roelof17mo ago
witj javascript ?
venkat
venkat17mo ago
no only css
Jochem
Jochem17mo ago
can you change the HTML?
venkat
venkat17mo ago
i am trying to do it without changing
roelof
roelof17mo ago
Then I think it will be a very very difficult css
Jochem
Jochem17mo ago
do you need to support firefox?
venkat
venkat17mo ago
I'm just learning
Jochem
Jochem17mo ago
right, then I don't think you can at this point. There's the :has relational pseudo-class, but it doesn't have great support yet it's very hard to affect things higher in the DOM based on things lower in the DOM in CSS often it's entirely impossible
roelof
roelof17mo ago
I agree , when you do the checkbox just before it will be very easy to do what you want
venkat
venkat17mo ago
so do you want me to move responsive-nav class above left-nav class and I can use the sibling selector thanks for the advice
Jochem
Jochem17mo ago
yeah, that's currently the best way to use the checkbox trick, using the sibling selector
venkat
venkat17mo ago
thank you for the quick responses
roelof
roelof17mo ago
yep, I used it several times that way for a accordion and a hambuger menu YW
Jochem
Jochem17mo ago
there's a demo for :has, which works for about 85% of people https://caniuse.com/css-has This hasn't changed your HTML at all https://codepen.io/jochemm/pen/RwqomEW also you're welcome, but keep in mind we're not always this quick, sometimes it can take a while for people to respond.
venkat
venkat17mo ago
👍 now do i need to end this post or something
Jochem
Jochem17mo ago
you can add a solved tag, that's good enough thanks!
Want results from more Discord servers?
Add your server