Как сделать чтобы при увеличении ширины окна скрывался блок?

Question

Ram Ce @onskrer

начинающий Fullstack программист

Как сделать чтобы при увеличении ширины окна скрывался блок?

Есть такой код:

<div class="overlay">
		<a href="#" class="overlay__toggler">&#9776;</a>
		<div class="overlay__menu">
			<a href="#" class="overlay__nav-link">Главная</a>
			<a href="#" class="overlay__nav-link">Услуги</a>
			<a href="#" class="overlay__nav-link">Навыки</a>
			<a href="#" class="overlay__nav-link">Команда</a>
			<a href="#" class="overlay__nav-link">Контакты</a>
		</div>
	</div>
	<header>
		<div class="header__top">
			<span class="header__logo">Tesmi</span>
			<nav class="header__nav">
				<a href="#" class="header__nav-toggle">&#9776;</a>
				<a href="#" class="header__nav-link">Главная</a>
				<a href="#" class="header__nav-link">Услуги</a>
				<a href="#" class="header__nav-link">Навыки</a>
				<a href="#" class="header__nav-link">Команда</a>
				<a href="#" class="header__nav-link">Контакты</a>
			</nav>
		</div>
	</header>

header {
	width: 100%;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.600) 0%, rgba(0, 0, 0, 0.600) 50%, rgba(0, 0, 0, 0.600) 100%), url(../img/background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
	padding: 15px;
	box-sizing: border-box;
}

.header__top {
	display: flex;
	justify-content: space-between;
}

.header__logo {
	color: var(--main);
	font-family: 'Comic Neue', sans-serif;
	font-weight: 700;
	font-size: 45px;
}
nav {
	margin-top: 17px;
}

nav a {
	font-size: 19px;
}

nav a:not(:first-child) {
	margin-left: 4px;
}

.header__nav-toggle {
	display: none;
	font-size: 22px;
}

.overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: rgba(0, 0, 0, 0.342);
	width: 100%;
	height: 100%;
	padding: 54px 15px;
	box-sizing: border-box;
}

.overlay.active {
	display: block;
}

.overlay__toggler {
	font-size: 22px;
	float: right;
}

.overlay__menu {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.overlay__nav-link {
	font-size: 27px;
}

.overlay__nav-link {
	padding: 7px;
}

@media screen and (max-width: 600px) {

	.header__nav-link {
		display: none;
	}

	.header__nav-toggle {
		display: block;
		float: right;
	}

	.header__nav-link.active {
		display: block;
		margin-top: 13px;
	}
}

var nav = $('.overlay');
var headerOpen = $('.header__nav-toggle');

headerOpen.on('click', function () {
	nav.addClass('active');
})

var overlayClose = $('.overlay__toggler');

overlayClose.on('click', function () {
	nav.removeClass('active');
})

if ($(window).width() > 600) {
	nav.css('display', 'none');
}

При увеличении размера окна, если открыт overlay, он должен скрываться, но почему то не скрывается.

Как это исправить?