Can't get my css selector to work properly - html

Question

the last :checked call in my css code is not working. I want to be ably to have the .nav-bar-element's move from off the screen to where they are now when the hamburger icon is clicked, but I can't seem to get the selector working.
#import url('https://fonts.googleapis.com/css?family=Raleway');
body {
background-image: url(http://www.hayesandjarvis.co.uk/medias/sys_master/hcf/hbb/8912480731166.jpg);
min-height: 100%;
position: relative;
opacity: 0.75;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
font: 400 15px/1.8"Raleway", sans-serif;
color: #777;
}
.nav-bar {
z-index: 100;
background-color: rgba(255, 255, 255, 0.2);
width: 100vw;
height: 64px;
overflow: hidden;
position: absolute;
font-weight: bold;
font-size: 18px;
}
.nav-bar:hover {
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.nav-content {
position: absolute;
right: 0px;
float: right;
height: 64px;
width: 512px;
color: #000;
}
.nav-content .nav-bar-element {
float: left;
margin: 0px;
width: 100px;
height: 32px;
margin: 16px 25px 16px 25px;
}
.nav-content .nav-bar-element a {
width: 100px;
height: 32px;
text-decoration: none;
color: #000;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#nav-button {
display: none;
}
.menu-button {
z-index: 101;
vertical-align: baseline;
position: absolute;
height: 48px;
width: 48px;
top: 8px;
right: 25px;
}
.bar {
position: absolute;
height: 2px;
width: 66%;
background-color: #000;
left: 20%;
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.bar:nth-child(1) {
top: 24%;
}
.bar:nth-child(2) {
top: 47%;
}
.bar:nth-child(3) {
top: 47%;
}
.bar:nth-child(4) {
top: 71%;
}
#nav-button:checked+ .menu-button .bar:nth-child(1) {
width: 0px;
}
#nav-button:checked+ .menu-button .bar:nth-child(2) {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: rotate(45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(3) {
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: rotate(-45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(4) {
width: 0px;
}
#nav-button:checked+ #change-me {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="bgimg-1">
<!--<div class="nav-bar-bg"></div>-->
<div class="nav-bar">
<input type="checkbox" id="nav-button" />
<label for="nav-button" class="menu-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</label>
<div class="nav-content" id="change-me">
<div class="nav-bar-element"><i class="fa fa-rocket" aria-hidden="true"></i> Projects
</div>
<div class="nav-bar-element"><i class="fa fa-user" aria-hidden="true"></i> About Me
</div>
<div class="nav-bar-element"><i class="fa fa-inbox" aria-hidden="true"></i> Contact
</div>
</div>
</div>
</div>

Answer 1

I need glasses it is a sibling, but not the adjacent sibling, so use ~ instead of +
OR
Use + between checkbox and label and a + between label and #change-me,
Remove the + on last ruleset, because #change-me is a child of #nav-button, not na sibling.
OK I finally got enough specificity! Use this:
#nav-button:checked ~ .nav-content#change-me * {
color: #fff;
}
SNIPPET
#import url('https://fonts.googleapis.com/css?family=Raleway');
body {
background-image: url(http://www.hayesandjarvis.co.uk/medias/sys_master/hcf/hbb/8912480731166.jpg);
min-height: 100%;
position: relative;
opacity: 0.75;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
font: 400 15px/1.8"Raleway", sans-serif;
color: #777;
}
.nav-bar {
z-index: 100;
background-color: rgba(255, 255, 255, 0.2);
width: 100vw;
height: 64px;
overflow: hidden;
position: absolute;
font-weight: bold;
font-size: 18px;
}
.nav-bar:hover {
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.nav-content {
position: absolute;
right: 0px;
float: right;
height: 64px;
width: 512px;
color: #000;
}
.nav-content .nav-bar-element {
float: left;
margin: 0px;
width: 100px;
height: 32px;
margin: 16px 25px 16px 25px;
}
.nav-content .nav-bar-element a {
width: 100px;
height: 32px;
text-decoration: none;
color: #000;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#nav-button {
display: none;
}
.menu-button {
z-index: 101;
vertical-align: baseline;
position: absolute;
height: 48px;
width: 48px;
top: 8px;
right: 25px;
}
.bar {
position: absolute;
height: 2px;
width: 66%;
background-color: #000;
left: 20%;
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.bar:nth-child(1) {
top: 24%;
}
.bar:nth-child(2) {
top: 47%;
}
.bar:nth-child(3) {
top: 47%;
}
.bar:nth-child(4) {
top: 71%;
}
#nav-button:checked+ .menu-button .bar:nth-child(1) {
width: 0px;
}
#nav-button:checked+ .menu-button .bar:nth-child(2) {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: rotate(45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(3) {
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: rotate(-45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(4) {
width: 0px;
}
#nav-button:checked ~ .nav-content#change-me * {
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sam Erickson</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="bgimg-1">
<!--<div class="nav-bar-bg"></div>-->
<div class="nav-bar">
<input type="checkbox" id="nav-button" />
<label for="nav-button" class="menu-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</label>
<div class="nav-content" id="change-me">
<div class="nav-bar-element"><i class="fa fa-rocket" aria-hidden="true"></i> Projects
</div>
<div class="nav-bar-element"><i class="fa fa-user" aria-hidden="true"></i> About Me
</div>
<div class="nav-bar-element"><i class="fa fa-inbox" aria-hidden="true"></i> Contact
</div>
</div>
</div>
</body>
</html>