Having difficulties incorporating a jquery menu for mobile with the provided code (see below). The issue arises when activating the mobile menu and then resizing the browser window to desktop size, where the menu's class selector has a display:none attribute that I can't seem to remove when the resolution is above 900px.
<div id="header">
<div class="logoandnav">
<a id="logo" href="http://localhost/wordpress2"><img src="#></a>
<ul class="menu">
<li><a href="http://localhost/wordpress2">Portfolio</a></li>
<li><a href="http://localhost/wordpress2/?page_id=775">Services</a></li>
<li><a href="http://localhost/wordpress2/?page_id=736">About</a></li>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
/* prepend menu icon */
$('#header').prepend('<div id="menu-icon" data-toggle="collapse">Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$(".menu").slideToggle();
$ (this) .toggleClass("active");
});
});
</script>
#header{
background: rgba(255,255,255,0.9);
border-bottom: 1px solid rgba(0,0,0,0.1);
padding: 20px 0 10px 0;
position: fixed;
top: 0;
width: 90%;
z-index: 991;
height:80px;
/*box-shadow:1px 1px 3px rgba(255,255,255,0.5);*/
box-shadow: 0 0 30px rgba(0,0,0,.10);
-webkit-box-shadow: 0 0 30px rgba(0,0,0,.10);
-moz-box-shadow: 0 0 30px rgba(0,0,0,.10);
display:block;
}
#logo{
float:left;
text-align:center;
margin-top:0px !important;
margin-bottom:0px !important;
}
.logoandnav{
max-width:1200px;
margin-left:50px;
margin-top:10px !important;
height:60px;
}
ul li a:hover{border-bottom:3px solid #507abf;color:#507abf;}
.menu{float:right;line-height:50px;}
ul.menu li,.menu{display:inline;}
#menu-icon{display:none;}
ul li{
display:inline;
list-style:none !important;
padding-left:25px !important;
font-family: 'Archivo Narrow', Arial,sans-serif;
font-weight:800;
font-size:22px !important;
}
@media only screen and (max-width: 767px){
ul li{font-size:18px !important;}
#menu-icon{
color:black;
width:42px;
height:30px;
padding:12px 20px 0px 20px;
cursor:pointer;
display:block;
float:right;
margin-top:30px;
font-size:14px;
text-transform:uppercase;
background:url('http://localhost/wordpress2/wp-content/uploads/2013/12/menu_button.png') no-repeat left center;
}
#menu-icon:hover{color:#33B779;}
.menu{display:none;}
.menu{
clear:both;
position:absolute;
top:70px;
right:0px;
width:140px;
z-index:1000;
padding:5px;
background-color:white;
border:1px solid grey;
line-height:30px;
}