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•12mo ago

witj javascript ?

venkat•12mo ago

no only css

Jochem•12mo ago

can you change the HTML?

venkat•12mo ago

i am trying to do it without changing

roelof•12mo ago

Then I think it will be a very very difficult css

Jochem•12mo ago

do you need to support firefox?

venkat•12mo ago

I'm just learning

Jochem•12mo 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•12mo ago

I agree , when you do the checkbox just before it will be very easy to do what you want

venkat•12mo 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•12mo ago

yeah, that's currently the best way to use the checkbox trick, using the sibling selector

venkat•12mo ago

thank you for the quick responses

roelof•12mo ago

yep, I used it several times that way for a accordion and a hambuger menu YW

Jochem•12mo 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•12mo ago

👍 now do i need to end this post or something

Jochem•12mo ago

you can add a solved tag, that's good enough thanks!

Gaming

Programming

Responsive navbar