title: Adding CSS selector in javascript
body: <p>I have a nav-bar which has <code>display:none</code> by default. When a user clicks on a hamburger icon at the top-right corner, I want to display it. What I've done is,</p>
  <pre class="lang-html prettyprint-override"><code>   &lt;nav id=&quot;navigation-bar&quot;&gt;
        ....
     &lt;/nav&gt;
  </code></pre>
  <p>Javascript:</p>
  <pre class="lang-js prettyprint-override"><code> const menuBtn = document.getElementById(&quot;menu-cta&quot;), //the menu icon
         navBar = document.getElementById(&quot;navigation-bar&quot;);
      
  
   menuBtn.addEventListener('click',()=&gt;{
           navBar.classList.add('show-btn');
       });
  </code></pre>
  <p>In my css, the below style is not working</p>
  <pre class="lang-css prettyprint-override"><code>.show-btn{
     display:block
  }
  </code></pre>
  <p>But when I add nav. in front of it, it works</p>
  <pre class="lang-css prettyprint-override"><code>nav.show-btn{
     display:block
  }
  </code></pre>
  <p>ps: I'm using sass</p>