html - CSS Selectors outside parent div -

so have bit of html have navigation bar hidden off-screen until checkbox @ top :checked clicking label (hamburger png) @ point comes on screen until such time hamburger icon clicked again , navigation menu hidden off screen once more.

now if stick nav section inside header use selectors (+ , ~) target it...but can't think of way when it's new div that's not next checkbox , in it's own div outside of parent. parent have in common #wrapper, no? can't figure out how target inside div.

is there way target in pure css make nav menu pop out when checkbox :checked , when un-checked? have javascript it, wanted in css in case, well, know...the user has javascript disabled.

html

<div id="wrapper">   <header>     <a href="#" id="logo">titlebar</a>     <label for="hamburger" id="nav_open_icon"><img src="http://i.imgur.com/vv4rdc9.png" alt="open-menu"></label>     <label for="hamburger" id="nav_close_icon"><img src="/img/hamburger/close.png" alt="close-menu"></label>     <input type="checkbox" id="hamburger">     <div id="overlay"></div>   </header>    <nav>     <ul>       <li id="#"><a href="#">home</a><img src="/img/home.png" alt="home"></li>       <li id="#"><a href="#">stuff</a><img src="/img/about.png" alt="about"></li>     </ul>   </nav> </div> 

css

    body{        color: white;        background-color: black;        font-family: "pt sans", "sans-serif";        font-size: 1rem;     }      #container{        margin: 0 auto;        min-width: 320px;        max-width: 1600px;     }      h1,h2,h3,h4,h5,h6{        color:#febc11;        text-align: center;     }      header{        padding: 1rem 0rem 1rem 0rem;        background-color: #333;     }      #logo{        color:#febc11;        font-size: 1rem;        text-decoration: none;        margin-left: .5rem;        font-weight: bold;     }      #nav_open_icon{        position: absolute;        top: 1rem;        right: 0;        margin-right: 1rem;        width: 30px;        height: 23px;     }      #nav_close_icon{        display: none;        position: absolute;        right: 0;        top: 0.6rem;        width: 30px;        height: 30px;        margin-right: 1rem;     }      #hamburger{        /*display: none;*/     }      #overlay{      }      nav{        position: absolute;        left: -50%;        background-color:rgba(124,115,115,.2);        width: 10rem;     }      .nav_toggle{          position: absolute;        left: 0%;        background-color:rgba(51,51,51,1);        }     #hamburger:checked nav + nav_toggle{   }      nav ul{        list-style-type: none;        margin: 0;        padding: 0;       }      nav li{        padding: 1.1rem;        }      nav a{        color: white;        text-decoration: none;        margin-left: 1rem;       }      nav img{        float: left;        margin: -.5rem 0rem 0rem -.2rem;        height: 35px;        width: 35px;     } 

https://jsfiddle.net/zal594s8/

you cannot target nav checkbox css, because outside of header contains checkbox. there reason can't move nav inside header , like:

js fiddle

nav {   position: absolute;   left: -50%;   background-color: rgba(124, 115, 115, .2);   width: 10rem;   transition: .3s; }  input:checked + nav {   position: absolute;   left: 0%;   background-color: rgba(51, 51, 51, 1); }