unhide div on checkbox tick

I am trying to create a responsive navbar, so when you click a hidden checkbox the content unhides.

The problem is, I can't get the "checked" css to actually pick up and do anything.

Example to run here: http://ift.tt/2gtFloq

CSS Code:

#nav-hidden{background: red; display: none;}
#navigation-mobile{display:none;}

/* DESKTOP */
@media only screen and (max-width: 1200px) {
        #navigation-mobile {display: block;}
        #menu-toggle:checked ~ #nav-hidden {
            opacity: 1;
            height: 100vh;
            visibility: visible;
        }

        .label-toggle {
            cursor: pointer;
            display: block;
            float: right;
        }
}

HTML:

<div id="navigation-mobile">
  <input type="checkbox" id="menu-toggle">
      <label for="menu-toggle" class="label-toggle"></label>
    </input>
    <div id="nav-hidden">
        <ul>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>