Bny6 Bny6 - 5 months ago 10
CSS Question

CSS Selectors outside parent div

So I have a bit of HTML where I have a navigation bar hidden off-screen until the checkbox at the top is :checked by clicking the label (hamburger png) at which point it comes back on screen until such a time as the hamburger icon is clicked again and the navigation menu is hidden off screen once more.

Now if I were to stick the nav section inside the header I could use the selectors (+ and ~) to target it...but I can't think of a way to do that when it's a new div that's not immediately next to the checkbox and in it's own div outside of the parent. The only parent they would have in common then is #wrapper, no? But I can't figure out how to target that from inside another div.

Is there a way to target this in pure CSS to make the nav menu pop out when the checkbox is :checked and back when it is un-checked? I already have the JavaScript for it, but I wanted it in CSS as well in case, well, you 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/

Answer

You cannot target the nav from the checkbox with css, because it is outside of the header that contains the checkbox. Is there any reason you can't move the nav inside the header and do something 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);
}
Comments