'a' tag and 'label' tag inside each other not working

Question

I want to make a toggable navigation using only CSS.

<header>
    <input type="checkbox" id="nav" value="nav" class="header-toggle hidden-checkbox">
    <label for="nav" class="burger-container">
        <img src="../media/images/burger_menu.svg" alt="burger menu">
    </label>
 <nav>
        <ul>
            <li><a href="../index.html">Home</a></li>
            <li><a href="product.html">Products</a>
                <ul>
                    <li><a href="product.html#section1">Section 1</a></li>
                    <li><a href="product.html#section2">Section 2</a></li>
                    <li><a href="product.html#section3">Section 3</a></li>
                </ul>
            </li>
            <li><a href="project.html">Personalise</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="faq.html">FAQ</a></li>
        </ul>
    </nav>
</header>

This is all works fine, The way I do it is when you click the SVG image inside the label, the label toggles an input type checkbox, this way CSS knows when the checkbox is checked display the navigation when the checkbox is not checked hide navigation using

 input:checked {}

The only problem I have is with the inner unordened list. As you can see when you are on the page "product.html" and you click any item in the sub-list you stay on the product page but scroll down to a section.

When you scroll down to a section the nav stays open because you're on the same page and didn't toggle the checkbox.

I tried to put a 'label' AROUND the 'a' tag but than only the label did it's job by unchecking the checkbox but the 'a' tag didn't scroll down.

Than I tried putting the 'label' INSIDE the 'a' tag but then only the 'a' tag scrolled down but the 'label' didn't uncheck the checkbox.

Like this

  //like this 
   <li><a href="product.html#section2"><label for="nav">S2</label></a> </li>

  //or this
  <li><label for="nav"><a href="product.html#section2">S2</a> </label></li> 

But both didn't help.

NOTE: that the other label does check/uncheck the navigation and the a tag does scroll down ONLY when combining both it doesn't work.

BTW I also found this question, but it didn't solve my problem. <a> tag inside <label> tag not triggering checkbox

Is there any way to solve this without javascript? (disabling the navigation when scrolling down to a section element).