CSS :checked selector doesn't work

Question

I tried to get a hamburger menu working with only css.

The problem is that my checked function doesn't work as intended and I cant figure out what I got wrong.

The hamburger menu starts at 1000px.

I used input with checkbox to switch between open and close.

#toggle:checked + .menu { display: block;}

 .menu a { font-size: 22px; } #toggle { display: none; } .menu { text-align: center; width: 100%; display: none; } #toggle { display: block; } #toggle:checked+.menu { display: block; } 

 <a herf="#"> <input type="checkbox" id="toggle"> <div class="menu"> <a href="#">Home</a> <a href="#">Resources</a> <a href="#">Monthly</a> <a href="#">Terms</a> <a href="#">Privacy</a> </div> </a> 

Answer 1

You've wrapped these some of these elements in malformed links ( herf ?)....and that's not permitted by HTML

See this Q&A

The browser seems to be autoclosing the link wrapper just after the input which means that the :checked + selector fails.

Remove the link or change it to something innocuous, like a div.

 nav .menu a { text-decoration: none; color: white; font-weight: 700; padding: 0 1% 0 1%; } .menu a { font-size: 22px; } #toggle { display: none; } .menu { text-align: center; width: 100%; display: none; } nav .menu a { display: block; color: #2b9dff; background-color: white; border-bottom: 1px solid #2b9dff; margin: 0; } #toggle { display: block; } #toggle:checked+.menu { display: block; } 

 <input type="checkbox" id="toggle"> <div class="menu"> <a href="#">Home</a> <a href="#">Resources</a> <a href="#">Monthly</a> <a href="#">Terms</a> <a href="#">Privacy</a> </div>