I have these nav settings under a media-query (max-width: 767px). I'm using a checkbox input to display the nav when checked. That works but the ul inside the nav with all the li items does not display. Display is set to 'none' for ul and 'block' when the input is checked. Please see the code on codepen here: mobile-dropdown
When I check the dev tools, the ul is still set to display: none; Even when the input is checked, which shouldn't happen. But clearly I'm missing something. The nav drops down when input is checked but the ul is still at display: none; for some reason. Here is the main code below. There is more on the codepen link, which might be better to determine the issue.
<body>
<header>
<!-- Logo -->
<p class="main-logo">STARTUP GROUP</p>
<!-- Hamburger icon -->
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<!-- Site Navigation -->
<nav>
<ul id="nav-items">
<li><a href="#">COMPANIES</a></li>
<li><a href="#">CITY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">JOBS</a></li>
</ul>
</nav>
</header>
</body>
@media (max-width: 767px) {
header {
position: fixed;
top: 0;
width: 100%;
padding: 2.875em 0.5em;
}
nav {
width: 100%;
height: 100%;
position: fixed;
background-color: beige;
overflow: hidden;
}
#nav-items a {
display: block;
padding: 30px;
color: black;
border-top: 1px solid black;
}
#nav-items a:active {
text-decoration: underline;
}
nav {
max-height: 0;
transition: max-height .3s ease-out;
}
label {
display: inline-block;
color: black;
font-style: normal;
font-size: 1.5em;
cursor: pointer;
}
#nav-items,
#hamburger {
display: none;
}
#hamburger:checked ~ nav {
max-height: 100%;
}
#hamburger:checked ~ #nav-items {
display: block;
}
}