Javascript-форум - Как изменить видимость элемента при изменении ширины другого элемента (jquery)?

Я нуб. Помогите пожалуйста. Сделал страницу адаптивную. (При ширине экрана < 800 меню вертикальное раскрывающееся, при ширине > 800 оно горизонтальное открытое) Проблема в том, что если меню вертикальное открыть а потом закрыть , а потом растянуть страницу (чтобы ее ширина стала > 800 то горизонтальное меню не появляется, а вообще исчезает). Если же вертикальное меню открыть и не закрывать, а потом растянуть страницу, то меню так и остается вертикальным. Надеюсь объяснил понятно. (Код не мой, смотрел видеоурок на ютубе. Обратился сначало к автору, но кажется его особо не беспокоит, что его урок с косяком. )
Как я сам пытался решить проблему :
var w = $("body").width();
console.log(w);
if (w > 800){
$(".menu a").css("display", "inline-block");
}
Код HTML :

<body>
<div class="wrapper">
<div class="menu">
<span>open menu</span>
<a href="#">for us</a>
<a href="#">interesting</a>
<a href="#">info</a>
<a href="#">prewiew</a>
<a href="#">other</a>
</div>
<div class="padding">
<img src="img.jpg" alt="rocks">
<h3>Rocks</h3>
<p></p>
<p><input type="text" placeholder="text"></p>
<p><button>Push</button></p>
</div>
</div>
</body>

код CSS (медиаскрин):

@media screen and (max-width: 800px) {
.wrapper {
width: 100%;
margin: 0;
border: 0;
}

button, input {
width: 100%;
}

.menu a {
display: none;
}

.menu span {
display: block;
padding:
}
}

Код JS :

$(document).ready(function(){
$(".menu span").click(function(){

if ($(".menu a").is(":visible") == true){
$(".menu a").css("display", "none");
$(".menu span").text("Открыть меню");
} else {
$(".menu a").css("display", "block");
$(".menu span").text("Закрыть меню");
}

});
});