Boggled because my toggle isn't toggled

HTML-CSS
1

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.
2

You have this selector

#toggle:checked + .nav-ul

But your HTML looks like this

<header>
  <h1>Technical Document</h1>
  <label for="toggle">&#9776;</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">&#9776;</label>
<input type="checkbox" id="toggle" />
  
<ul class="nav-ul">
 <li></li>
</ul>
3

I appreciate the guidance and I will work it out from here.