Настройка display = 'none' в javascript имеет приоритет над CSS в медиа-запросе

У меня есть простая веб-страница, на которой есть панель навигации, заключенная в теги навигации. Я использую медиа-запрос, чтобы скрыть эту панель навигации, когда окно просмотра имеет ширину менее 700 пикселей (путем настройки display: none для тега навигации в CSS), и чтобы отобразить эту панель навигации, когда окно просмотра имеет ширину 700 пикселей или больше (путем настройки display : блок для тега навигации в CSS). Это работает именно так, как я хочу, когда я изначально загружаю свою страницу. Я могу изменять размер области просмотра столько раз, сколько захочу, и каждый раз видеть желаемый эффект (исчезновение и повторное появление панели навигации).

У меня также есть javascript на этой странице. Во-первых, я получаю ссылку на элемент nav следующим образом:

const mynav = document.querySelector('nav');

Когда панель навигации скрыта, нажатие кнопки приводит к запуску следующего кода для отображения панели навигации:

mynav.style.display = 'block';

После того, как панель навигации была отображена с помощью javascript, нажатие той же кнопки приводит к запуску следующего кода, чтобы скрыть панель навигации:

mynav.style.display = 'none';

Этот javascript работает так, как я надеялся, за исключением одной проблемы. После того, как javascript использовался для отображения, а затем скрытия панели навигации таким образом, панель навигации остается скрытой с этого момента, независимо от того, что я делаю. Похоже, что настройка display = none в javascript имеет приоритет над моим CSS в моем медиа-запросе, поэтому, если я снова увеличу область просмотра, я не смогу снова отобразить панель навигации.

Если кто-нибудь здесь может сказать мне, есть ли способ сделать эффект моего javascript «временным» таким образом, чтобы после его запуска CSS в моем медиа-запросе все еще работал?

Любые советы или предложения будут с благодарностью.

Заранее спасибо, Павел