Is it possible to override an overridden one?

Question

css

Example on codepen. . When the browser window is reduced in size, the navigation is hidden by display: none and a button appears. When the navigation button is clicked, display: block!important is assigned. And now, if the menu is not closed by clicking on the button again, then after the browser window is enlarged and then reduced, the navigation no longer collapses. That is, it turns out that by folding the first time and adding display: block in the media query, the navigation collapsed. But then I do display: block!important and after that, the code in the media cannot redefine the class.
That's how I understand it, I really don't know. Therefore, I ask you to look and say what needs to be redone, preferably without js, if possible. I take the first steps and learn everything bit by bit, so to put it mildly, it’s not easy, I hope for you.

Answer 1

In your case, when you only need a css solution, I make two menus. I hide one at low resolutions, I hide the second at high resolutions. Accordingly, one menu is static, the other is expanding.
With the usual menu, I think you yourself will figure it out, and the collapsible one here, for example, can be borrowed - codepen.io/wesdews/pen/WbOYzM