При увеличении размера (от 500px) и сворачивании меню-бургер, само меню скрыто, в чем проблема?

Потому-что JS-ом жестко выставляешь display: none для nav, а он прописывается инлайн как свойство в сам HTML и медиазапрос не срабатывает.

Но если дописать после первого media :

@media all and (min-width: 500px) {
	nav {
		display: grid !important;		
	}
}

то вроде работает.
В первом только нужно поправить (display: none - написать)

nav {
		display: none;
		grid-template-columns: 1fr;
		grid-gap: 40px;
		padding: 20px 0 20px 0;
		font-size: 20px;
	}

Но ощущение такое, что это костыль.