CSS: :checked selector affect multiple elements

Question

Hi guys, I'm trying to build a mobile navbar using the :checked selector of a hidden check box to reveal the navigation.

I would like to make it so that when the it is checked (navigation is showing) for the icon to change, perhaps rotate or whatever.

on line 184 of CSS:
#toggle:checked + #ham-list-items {
-webkit-transform: translateX(0px);

}

many thanks in advanced!
excuse the sloppy code, I just started with web dev
I'll attach the full code
https://code.sololearn.com/W2vCWG8SsHDI/?ref=app
https

Answer 1

ahhh, so you used the + for the button because it is a direct decendant of the input, and de ~ so it would target what was below. Is that correct?

Answer 2

Niush sitaula yes, it works but I would like to be able to modify (for example rotate) the hamburger button while the navigation is showing and go back to its original orientation once navigation is hidden again

Answer 3

Hi 064XP

Here is sample working code.
You need to target the sibling css selectors correctly

https://code.sololearn.com/Wij0MJ5wy0l3/#html

Answer 4

Mike Choy
Cool! Thank you.
So can I only have one item using the + selector?
Or what exactly was the issue?

Answer 5

So your toggle : checked is targeting sibling selectors using the + pseudo selector. The + only refers to the direct descendant. I changed to using ~ pseudo selector to target any sibling selector. Had to add some animations for the hamburger menu also.

Answer 6

yep

Answer 7

cool! Thanks Mike

Answer 8

?