CODEWITHSUNDEEP
htmlcsscheckbox
Noah Adler
Noah Adler

Reputation: 19

Checkbox-Trick not working

I want to use the checkbox-trick to show my mobile navbar. Somehow the h1 isn't showin up even when the invisible checkbox is checked. What have I done wrong?

#label {
  margin-left: auto;
  margin-right: auto;
  color: #000000;
  font-size: 35px;
  cursor: pointer;
  width: 47px;
}


h1 {
display: none
}
#toggle {
  display: none;
}


#toggle:checked + h1 {
		display: block;
}
  
<div id="hamburgermenu">
  <label id="label" for="toggle">&#9776;</label>
  <input id="toggle" type="checkbox">
</div>

<h1>DEMO ELEMENT</h1>

Upvotes: 0

Views: 75

Answers (1)

user7207170
user7207170

Reputation:

You're using "+" which is a sibling CSS selector, but <h1> isn't a sibling of your checkbox. It's a sibling of the checkbox's parent container. You can have 3 ways to go about it.

First way: Make it the sibling of the input by placing it inside

#label {
  margin-left: auto;
  margin-right: auto;
  color: #000000;
  font-size: 35px;
  cursor: pointer;
  width: 47px;
}

h1 {
  display: none
}

#toggle {
  display: none;
}

#toggle:checked+h1 {
  display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">&#9776;</label>
<input id="toggle" type="checkbox">

<h1>DEMO ELEMENT</h1>
</div>

Second way: Make it the sibling of the input by taking the input out of the container

#label {
  margin-left: auto;
  margin-right: auto;
  color: #000000;
  font-size: 35px;
  cursor: pointer;
  width: 47px;
}

h1 {
  display: none
}

#toggle {
  display: none;
}

#toggle:checked + h1 {
  display: block;
}
<div id="hamburgermenu">
<label id="label" for="toggle">&#9776;</label>
</div>
<input id="toggle" type="checkbox">
<h1>DEMO ELEMENT</h1>

Third way: Make use of javascript.

Upvotes: 4

Related Questions