Due to feedback that I received on my project, I am adding more responsiveness to my technical page.
Plan:
When viewed on a smaller device my navigation should move to a fixed position at the top of the page. Also a hamburger should appear and act as a drop-down toggle for the navigation links.
Problem:
My drop down isn’t toggled when the hamburger is clicked.
What I have tested:
- That the hamburger works correctly and the checkbox is toggled when clicking the hamburger.
- When the .nav-ul class is changed to display:block the drop down appears as it should.
You have this selector
#toggle:checked + .nav-ul
But your HTML looks like this
<header>
<h1>Technical Document</h1>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
</header>
<ul class="nav-ul">
<li></li>
</ul>
The Adjacent sibling combinator (+) cannot select the nav-ul because it is not an adjacent sibling.
It would work with this HTML
<header>
<h1>Technical Document</h1>
</header>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<ul class="nav-ul">
<li></li>
</ul>
I appreciate the guidance and I will work it out from here.