Greetings to all who are taking the time to review this query! Everything seemed to be going well until I refreshed my code after making numerous changes, and then this issue arose:
Dropdown menu lacking color:
https://i.sstatic.net/3lz5a.png
The color from the header did not transfer to the dropdown. How can I resolve this? Below is the code snippet in question:
<header id="sticky-header">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<nav>
<ul>
<li><a href="#top">Home</a></li>
<li><a href="#bio">Bio</a></li>
<li><a href="#music">Music</a></li>
<li><a href="#shows">Shows</a></li>
<li><a href="#media">Media</a></li>
<li><a href="#contact">Contact</a></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;
}
}
Apologies for the formatting inconsistencies, as copy and paste did not function properly. Thank you for taking the time to read this and for any assistance you can provide! (Any other feedback is also welcome).