title: Problem with a CSS property when using a JS script
body: <p><code>Noob question</code>. I am practicing with a Web-Site; and I have a toggleable menu that appears when it gets to a certain width (250-750px) and disappears when it reaches 751px. When I insert a js script it remains hidden.</p>
  <p><strong><strong>CSS</strong></strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media (min-width: 250px) and (max-width: 750px){
  
      .headernav ul li {
          width: 100%;
          display: block;
          background-color: hsl(3, 43%, 56%);
          opacity: 0;
          transition: .5s;
      }
  
  @media (min-width: 751px){
      .headernav ul li{
          opacity: 1;
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p><em><strong>Here is the js code</strong></em></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let toggledNavMenu = false;
  
  function toggleMenu(){
  
      let getMenu = document.querySelector(".menu");
      let getLi = document.querySelectorAll(".headernav ul li");
      let liSize = getLi.length;  
  
      if(toggledNavMenu == false){
          for (let i = 0; i &lt; liSize; i++) {
              getLi[i].style.opacity ="0";
          }
      toggledNavMenu = true;
      }
  
      else{
          for (let i = 0; i &lt; liSize; i++) {
              getLi[i].style.opacity ="1"; 
          }
      toggledNavMenu = false;
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>The problem is that if I click on the menu; and the opacity is set to 0 in the js script, the menu remains hidden when I expand the screen. So basically I end up with an invisible menu. I'll let a sequence of images to explain it better. The only way to fix this is by going to a width&lt;=750 so the buttom shows and then click on it, bringing the opacity back to 1 and it's really annoying.</p>
  <p><a href="https://i.stack.imgur.com/E8kgd.png" rel="nofollow noreferrer">Starting Nav</a></p>
  <p><a href="https://i.stack.imgur.com/hko0f.png" rel="nofollow noreferrer">When Width is &lt;= 750 the toggleable menu appears</a></p>
  <p><a href="https://i.stack.imgur.com/SL8Jt.png" rel="nofollow noreferrer">The menu displays when clicked</a></p>
  <p><a href="https://i.stack.imgur.com/FND8r.png" rel="nofollow noreferrer">Width is now &gt; 750 and the menu disappears</a></p>