CODEWITHSUNDEEP
css
maka velli
maka velli

Reputation: 1

CSS :checked selector doesn't work

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>

Upvotes: 0

Views: 104

Answers (1)

Paulie_D
Paulie_D

Reputation: 115127

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

See this Q&A

enter image description here

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>

Upvotes: 1

Related Questions