Hamburger drop down menu color not transferring - html

Question

Thanks for taking time to read this question! So one minute everything was fine and then I refreshed my code after making too many changes to go back through, and this happened:
drop down menu without color:
None of the color from the header transferred into the dropdown. How do I fix this? Here is my code:
<header id="sticky-header">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<nav>
<ul>
<li>Home</li>
<li>Bio</li>
<li>Music</li>
<li>Shows</li>
<li>Media</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
header {
height: 67px;
background-color: #2b2b2b;
width: 100%;
position: fixed;
text-align: center;
}
nav ul {
margin-top: 13px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 0.8em;
}
nav a {
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
font-size: 0.95em;
padding: 0.5em;
color: #FFF;
}
nav a:hover,
nav a:focus {
color: #048575;
font-size: 1em;
}
label {
font-size: 2rem;
color: #FFF;
padding: 0.5em;
display: none;
width: 1em;
float: center;
}
#toggle {
display: none;
}
#media only screen and (max-width:650px) {
header {
padding-top: 0em;
padding-bottom: 0em;
background-color: #2b2b2b;
}
label {
display: block;
cursor: pointer;
}
nav li {
display: block;
display: none;
}
nav a {
display: block;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: 1px solid black;
}
#toggle:checked + nav li {
display: block;
}
}
Sorry the formatting is a bit weird, copy and paste didn't quite work. Thanks for reading and if you can help, please do! (Other feedback is also appreciated).

Answer 1

I take it you want the black background applied to your header to be reflected in your dropdown menu? In this case, you'll need to apply the background to nav inside of your media query. Note that you'll also want to set a margin-top to bring your navbar up a bit to be 'flush' with your header:
nav {
background-color: #2b2b2b;
margin-top: -20px;
}
Which can be seen in the following:
header {
height: 67px;
background-color: #2b2b2b;
width: 100%;
position: fixed;
text-align: center;
}
nav ul {
margin-top: 13px;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 0.8em;
}
nav a {
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
font-size: 0.95em;
padding: 0.5em;
color: #FFF;
}
nav a:hover,
nav a:focus {
color: #048575;
font-size: 1em;
}
label {
font-size: 2rem;
color: #FFF;
padding: 0.5em;
display: none;
width: 1em;
float: center;
}
#toggle {
display: none;
}
#media only screen and (max-width:650px) {
header {
padding-top: 0em;
padding-bottom: 0em;
background-color: #2b2b2b;
}
label {
display: block;
cursor: pointer;
}
nav {
background-color: #2b2b2b;
margin-top: -20px;
}
nav li {
display: block;
display: none;
}
nav a {
display: block;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: 1px solid black;
}
#toggle:checked+nav li {
display: block;
}
}
<header id="sticky-header">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<nav>
<ul>
<li>Home</li>
<li>Bio</li>
<li>Music</li>
<li>Shows</li>
<li>Media</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>