Navbar toggler without has or JS
I have this navbar toggler was working on today. Is there a way to make it without :has() or JS without compromising anything else?
https://codepen.io/myntsu/pen/vYrOjVo
1 Reply
yea, you can use the sibling
~ selector
change
.navbar:has(#checkbox[name="checkbox"]:checked) .navbar-items { }
to
#checkbox[name="checkbox"]:checked ~ .navbar-items { }
note: you already have the right html structure, but be sure you keep the .navbar-items after the input. The sibling selector can only look at the next elements, not previous ones
you can make it a bit cleaner by leaving away the attribute selector. The id is already specific enough
#checkbox:checked ~ .navbar-items { }