Возможно ли переопределить переопределенное?

Question

[vasIvas]

Пример на codepen.. При уменьшении размера окна браузера, навигация скрывается display: none и появляется кнопка. При нажатии на кнопку навигации присваивается display: block!important. И вот если меню не закрыть повторно нажав на кнопку, то после увеличения окна браузера и последующего уменьшения навигация уже не сворачивается. То есть получается что свернув первый раз и добавив в медиа запросе display: block навигация свернулась. Но потом я делаю display: block!important и вот после этого уже код в медиа не может переопределить класс.
Это так понимаю я, как на самом деле я не знаю. По этому прошу посмотреть и сказать что нужно переделать, желательно без js, если это возможно. Делаю первые шаги и познаю все по крупицам, по этому мягко говоря не просто, надеюсь на Вас.

Answer 1

[lacrim]

В вашем случае когда нужно только css решение я делаю два меню. Одно прячу на малых разрешениях, второе прячу на больших. Соответственно одно меню статическое, другое разворачивающееся.

С обычным меню я думаю вы и сами разберётесь, а сворачиваемое вот тут например можно повзаимствовать - codepen.io/wesdews/pen/WbOYzM