Adding CSS selector in javascript - html

Question

I have a nav-bar which has display:none 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,
<nav id="navigation-bar">
....
</nav>
Javascript:
const menuBtn = document.getElementById("menu-cta"), //the menu icon
navBar = document.getElementById("navigation-bar");
menuBtn.addEventListener('click',()=>{
navBar.classList.add('show-btn');
});
In my css, the below style is not working
.show-btn{
display:block
}
But when I add nav. in front of it, it works
nav.show-btn{
display:block
}
ps: I'm using sass

Answer 1

Add a class to your nav tag
So that your Code should look like this
const menuBtn = document.getElementById("menu-cta"), //the menu icon
navBar = document.getElementById("navigation-bar");
menuBtn.addEventListener('click',()=>{
navBar.classList.add('show-btn');
});
.navbar{
display:none;
}
.show-btn{
display:block
}
<nav id="navigation-bar" class="navbar">
<ul>
<li>Test</li>
</ul>
</nav>
<button id="menu-cta">btn</button>
please don't add css to #navigation-bar{} otherwise it will have the highest specificty.
You can learn more here
CSS Specificity

Answer 2

Another route is to use toggle() so the user can open and close your navigation.
const menuBtn = document.getElementById("menu-cta"), //the menu icon
navBar = document.getElementById("navigation-bar");
menuBtn.addEventListener('click',()=>{
navBar.classList.toggle('hide');
});
.hide {
display: none
}
<button id="menu-cta">...</button>
<nav id="navigation-bar" class="hide">
<ul>
<li>Test</li>
</ul>
</nav>