Style overlay when toggle selected

Question

I have a navbar and i am trying to add an overlay color when the hamburger toggle is selected. The overlay class is outside of the nav when the hamburger select box is selected. However, am not able to create a full page overlay when the hamburger check box is selected. Seems the overlay css styling cannot be accessed by the input checkbox because it is outside of the navbar. Would appreciate any suggestions on how to style an element outside of input select box such as a hamburger.

input[type=checkbox]:checked ~ .overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:green;
  z-index:10000;
}

<div class="overlay"></div><!--this should produce overlay over entire page when the toggler is selected-->

<div class="navbar">
   
  <!--toggle-->
  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle"  >
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>

  <div id="sidebarMenu" class="sidebar">
    <ul class="sidebarMenuInner">
      <li><a href="https://vanila.io" target="_blank">Company</a></li>
      <li><a href="https://instagram.com/plavookac" target="_blank">Instagram</a></li>
      <li><a href="https://twitter.com/plavookac" target="_blank">Twitter</a></li>
      <li><a href="https://www.youtube.com/channel/UCDfZM0IK6RBgud8HYGFXAJg" target="_blank">YouTube</a></li>
      <li><a href="https://www.linkedin.com/in/plavookac/" target="_blank">Linkedin</a></li>
    </ul>
  </div>

</div>