title: Sometimes the color of the navbar doesn't change in Chrome
body: <p>I am developing my <a href="https://mrjithin.netlify.app" rel="nofollow noreferrer">web developer portfolio</a>. In that when I press the hamburger, the color of the top nav bar should also change. But sometimes in Chrome it doesn't change and I have to reload. I thought it is probably because the script didn't load. But even after waiting for a long time this bug occurs. Can anyone say why it happens and how to solve it. <em>Note that this color change is only for mobile nav</em>. The source code is available at <a href="https://github.com/mrjithin/my-portfolio/" rel="nofollow noreferrer">https://github.com/mrjithin/my-portfolio/</a> . And the script that does this thing is available with the name ham.js in the scripts folder.
  <a href="https://i.stack.imgur.com/PMHSZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PMHSZ.jpg" alt="The bug image" /></a>
  The top color should have been the same as the color of the rest of the navbar.</p>
  <pre class="lang-js prettyprint-override"><code>// ham.js
  // For mobile hamburger
  const mobNav = document.querySelector(&quot;nav#mobile&quot;);
  const deskNav = document.querySelector(&quot;nav.desktop&quot;);
  const navColor = window.getComputedStyle(mobNav).getPropertyValue(&quot;background-color&quot;);
  
  document.getElementsByClassName(&quot;ham&quot;)[0].addEventListener(&quot;click&quot;, (event) =&gt; {
    document.getElementsByClassName(&quot;ham&quot;)[0].classList.toggle(&quot;cross&quot;);
    document.getElementById(&quot;line2&quot;).classList.toggle(&quot;none&quot;);
    mobNav.classList.toggle(&quot;on&quot;);
    mobNav.classList.toggle(&quot;off&quot;);
    if(mobNav.className === &quot;on&quot;){
      deskNav.style.backgroundColor = navColor;
    } else {
      deskNav.style.backgroundColor = &quot;&quot;;
    }
    event.stopPropagation();
  });
  
  // To close the navbar on clicking a link. 
  const mobileLis = document.querySelectorAll(&quot;nav#mobile a&quot;);
  
  Array.from(mobileLis).forEach(link =&gt; {
    link.addEventListener(&quot;click&quot;, event =&gt; {
      document.getElementsByClassName(&quot;ham&quot;)[0].classList.toggle(&quot;cross&quot;);
    document.getElementById(&quot;line2&quot;).classList.toggle(&quot;none&quot;);
      mobNav.classList.toggle(&quot;on&quot;);
      mobNav.classList.toggle(&quot;off&quot;);
      if(mobNav.className === &quot;on&quot;){
        deskNav.style.backgroundColor = navColor;
      } else {
        deskNav.style.backgroundColor = &quot;&quot;;
      }
      event.stopPropagation();
    })
  })
  </code></pre>
  <p>Thanks in advance!</p>