Height, Display, Width
 

Всем привет. Возникла еще одна проблема.

Когда расширение экрана меньше чем 540 пикселей, скрывается главное меню.
Появляется кнопка.
При клике на кнопку выезжает главное меню, которое раньше скрывалось.
Проблема в том, что когда я, открываю меню и закрываю его, и меняю расширение на больше чем 540 пикселей, то меню просто не появляется.
Логику я понимаю, и понимаю почему оно скрытое.
Но как это решить, не по силам.

<div class="menu">											<!-- Menu -->
				<div class="login-menu">									<!-- Login Menu -->
					<ul id="sub-menu-login">								<!-- Login Sub Menu -->
						<li>
							<a href="#">Stas Staseg</a>
							<ul>
								<li><a href="#">My Profile</a></li>
								<li><a href="#">My Swivl</a></li>
								<li><a href="#">Help</a></li>
								<li><a href="#">Sign Out</a></li>
							</ul>
						</li>											<!-- Login Sub Menu END-->
					</ul>
				</div>
				<ul class="navigation">									<!-- Navigation-->
					<li>
						<a href="#">My Feed</a>
						<span>Videos shared <br> with me</span>
					</li>
					<li>
						<a href="#" class="active">Library</a>
						<span>My private uploaded <br> content</span>
					</li>
					<li>
						<a href="#">Shared</a>
						<span>My shared content</span>
					</li>
					<li>
						<a href="#">Groups</a>
						<span>Create and manage <br> sharing lists</span>
					</li>
				</ul>													<!-- Navigation END-->
</div>
			<div class="collapse-nav"></div>

// Upload buttons

	$(".upload-video > a, .upload-slides > a").click(function (e) {
		var wrap = $(this).next(".drop-block-wrap")[0];
		$(".drop-block-wrap").filter(function() {return this !== wrap}).hide();
		$(this).next(".drop-block-wrap").toggle();
	});

//Callapse

	$(".collapse-nav").click(function(){
			$('ul.navigation').toggle();
			$('.header-wrap').toggleClass("height207");
	});

//If width

	function windowSize(){
		if ($(window).width() > '526'){
                   //$('ul.navigation').css({'display':'block'});
                   //Если здесь написать, что бы меню показывалось, то при изменении расширения экрана меню будет видно постоянно. Работает не корректно.
		} else {
			
		}
	}
	$(window).on('load resize',windowSize);
});

В какую сторону копать?

function windowSize(){
		if ($(window).width() > '526'){

		} else {
			$("ul.navigation").css({'display':'block'});
		}
	}
	$(window).on('load resize',windowSize);

Теперь меню всегда видимое.
При клике на кнопку, меню пропадает.
После клика, делаю ресайз, и меню появляется.

function windowSize(){
		if ($(window).width() > '526'){
			$('ul.navigation').show();
		} else {
			$('ul.navigation').hide();
		}
	}
	$(window).on('load resize',windowSize);

Пока что оставил так, сейчас вылезла другая проблема, попробую ее решить. Думаю что эта проблема пропадет сразу, после решения другой проблемы.
Спасибо за помощь!