Menu no celular esta bugado

fabiomoreira.rp · Dezembro 19, 2016

Boa noite, estou desenvolvendo um site e quando eu abro ele no celular preciso tocar 3x na tela para funcionar o menu, o que poderia ser?

HTML

<ul class="main_nav">
	<li class="main_nav_item"><a title="" href="#">LINK</a></li>
	<li class="main_nav_item"><a title="" href="#">LINK</a></li>
	<li class="main_nav_item"><a title="" href="#">LINK</a></li>
	<li class="main_nav_item"><a class="" title="" href="">Serviços</a>

	<ul class="main_nav_item_sub">
		<li class="main_nav_item_sub_item"><a href="#">Serviço 1</a></li>
		<li class="main_nav_item_sub_item"><a href="#">Serviço 2</a></li>
		<li class="main_nav_item_sub_item"><a href="#">Serviço 3</a></li>
	</ul>
	</li>
	<li class="main_nav_item"><a title="" href="" target="_blank">Link externo</a></li>
	<li class="main_nav_item"><a title="" href="#">LINK</a></li>
</ul>

CSS

@media (max-width: 992px){
	.mobile_action {position:relative;width:46px;height:46px;float:right;margin-right:20px; cursor:pointer;margin-top:2px;background-color:#F2F2F2;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
	.mobile_action.active {background-color:#0888B4;color:#fff !important;}
	.mobile_action.active i{color:#fff !important;}
	.mobile_action:hover {background-color:#A9D0F5;}
	
	.main_nav {position:fixed;top:63px;left:-100%;width:76%;height:100%;min-width:200px;max-width:230px;background-color:#222;z-index:99;overflow:hidden;overflow-y:auto;}
	.main_nav_item {float:left;width:100%;position:relative;}
	.main_nav_item > a{float:left;width:100%;padding:10px;text-transform:uppercase;text-decoration:none;color:#eee;font-weight:700;font-size:0.875em;}
	.main_nav_item:hover, .main_nav_item > a:hover{background-color:#444; color:#fff;}
	.mobile_action i {position:absolute;top:4px;left:9px;color:#4B528F;}
	.main_nav_item_sub{float:left;width:100%;padding:10px;background-color:#333;}
	.main_nav_item_sub_item{float:left;width:100%;}
	.main_nav_item_sub_item a{float:left;width:100%;padding:10px;text-transform:uppercase;text-decoration:none;color:#fff;font-size:0.8em;}
	.main_nav_item_sub_item a:hover{background-color:#4B528F;}
}

jQuery

$(document).ready(function(){
//CONTROLE DO MENU MOBILE
$('.mobile_action').click(function () {
	if (!$(this).hasClass('active')) {
		
			$(this).addClass('active');
			$('.main_nav').animate({'left': '0px'}, 300);
			
	} else {
		
			$(this).removeClass('active');
			$('.main_nav').animate({'left': '-100%'}, 300);
			
	}
});   
});