Issues with CSS checkbox checked not working in my header

Question

I have a checkbox and label in my header im using for a side menu.

However, its not working and the selector of being checked isn't working.

See here: https://jsfiddle.net/jpjL3hhp/

That should when clicked show a side bar.

However, it works here when my header isn't involved in the code: https://jsfiddle.net/jpjL3hhp/1/

What is causing the problem?

Working code:

<input type="checkbox" id="menu_collapse_icon">
<label for="menu_collapse_icon" class="menu_collapse_icon_label">Show Menu</label>
<div class="side-navigation">
    <ul>
        <li>
            <a href="#">Login</a>
        </li>
    </ul>
</div>

Not working:

<header>
<input type="checkbox" id="menu_collapse_icon">
<label for="menu_collapse_icon" class="menu_collapse_icon_label">Show Menu</label>
<div class="side-navigation">
    <ul>
        <li>
            <a href="#">Login</a>
        </li>
    </ul>
</div>
</header>

This is used for the check:

#menu_collapse_icon:checked ~ .side-navigation {
    margin-right: 0;
}

Joel Almeida · Accepted Answer · 2015-09-16 13:26:39Z

The problem is your HTML structure.

You are using #menu_collapse_icon:checked ~ .side-navigation as the selector. In the non-working example where you integrated with all the header it doesn't work because your .side-navigation isn't being selected since its not in the same level as #menu_collapse_icon.

So if you place the .side-navigation in the same level as #menu_collapse_icon it will work.

Like this:

.side-navigation {
  right: 0;
  height: 100%;
  background-color: white;
  width: 200px;
  margin-top: 106px;
  margin-right: -200px;
  transition: margin-right 0.5s ease;
  position: fixed;
}
#menu_collapse_icon:checked ~ .side-navigation {
  margin-right: 0;
}
header {
  position: fixed;
  height: 100px;
  background-color: blue;
  width: 100%;
}
header nav ul li {
  float: left;
}

<header>
  <div class="max-container">
    <input type="checkbox" id="menu_collapse_icon">
    <label for="menu_collapse_icon" class="menu_collapse_icon_label">
      Show Menu
    </label>
    <div class="side-navigation">
      <ul>
        <li>	<a href="#">Login</a>

        </li>
        <li>	<a href="#">Jobs</a>

        </li>
        <li>	<a href="#">Employers</a>

        </li>
      </ul>
    </div>
  </div>
</header>

Ah, makes sense. To keep this how I wanted, I ended up just moving the checkbox itself.

Collectives™ on Stack Overflow

Issues with CSS checkbox checked not working in my header

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related