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•2y ago

witj javascript ?

venkatOP•2y ago

no only css

Jochem•2y ago

can you change the HTML?

venkatOP•2y ago

i am trying to do it without changing

roelof•2y ago

Then I think it will be a very very difficult css

Jochem•2y ago

do you need to support firefox?

venkatOP•2y ago

I'm just learning

Jochem•2y 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•2y ago

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

venkatOP•2y 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•2y ago

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

venkatOP•2y ago

thank you for the quick responses

roelof•2y ago

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

Jochem•2y 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.

venkatOP•2y ago

👍 now do i need to end this post or something

Jochem•2y ago

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

Gaming

Programming

Responsive navbar