Hiding and showing element based on screen size

Question

I'm trying to make button that will hide and show menu when web page is being displayed on smaller screens. I want to keep the whole menu when the display is wider than 640px. I'm only allowed to use CSS and JavaScript.

Here is the JS function I wrote:

var b = document.getElementById ("menu-button");
b.addEventListener("click", showMenu, false);
var i = 0;
function showMenu () {
    i++;
    if(i % 2 == 1)
        document.getElementById("menu").style.display = "block";
    else
        document.getElementById("menu").style.display = "none";
}

It is working when displaying the page on smaller screen.

When I click the button to hide the menu (that changes "menu" display to none) and then increase the size of the page, my menu does not appear when the screen becomes larger than 640px.

This media media query does not do the job:

@media screen and (min-width:640px) {
    #menu {
        display: block;
    }
}

Answer 1

You need to add !important to the CSS property, like:

 #menu { display:block!important; } 

Your Javascript adds style attribute to the element, which has higher priority than any internal or external CSS styles, unless they "are" !important.

What you can also consider doing to avoid that is to toggle some CSS class in your Javascript instead of setting style attribute. This way you avoid using !important.

Answer 2

I suggest to not set an elements style like that, toggle a class on the element is the recommended way

Side note, I also changed from id to class, which is also recommended

Also, specificity is the reason, pointed out already in comments/answers, why your code doesn't work, more to read here: https://developer.mozilla.org/en/docs/Web/CSS/Specificity

var b = document.querySelector(".menu-button");
b.addEventListener("click", function(e) {
  document.querySelector(".menu").classList.toggle("show");
});

.menu {
  display: none;
}
.menu.show {
  display: block;
}


@media screen and (min-width:640px) {
    .menu {
        display: block;
    }
}

<div class="menu show">Hi, I'm a menu element</div>
<button class="menu-button">Show/Hide</button>