Responsive design for nav doesnt work - html

Question

I've done designing for desktop screen but it doesn't work for mobile phone. I'm wondering whats the problem. Here is my coding.
HTML
<div id="nav">
<span id="nav-icon"> <img src="assets/images/icon/navigation.png" alt="nav-menu"> </span>
<ul>
<li> LINK </li>
<li> LINK </li>
<li> LINK </li>
<li> LINK </li>
<li> LINK </li>
</ul>
<div class="navimage">
<img src="facebook-icon.png" alt="facebook-icon" />
<img src="twitter-icon.png" alt="twitter-icon" />
</div>
</div>
style.css
#nav {
border-bottom:1px solid #FFF;
margin-bottom:20px;
padding:0;
text-align:center;
max-width:95%;
margin:0 auto;
}
#nav #nav-icon img {
display:none;
}
#nav li {
display:inline;
}
#nav a {
display:inline-block;
padding:15px;
font-family: 'alegreya_sansregular', sans-serif;
font-weight:bold;
font-size:15px;
margin:15px 0;
}
#nav a:hover {
color:#DEB887;
text-decoration:none;
}
.navimage img {
width:30px;
height:30px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
}
.imgnav img {
margin-left:-25px;
}
.navimage {
float:right;
margin-top:-80px;
}
responsive.css
#media only screen and (min-width: 480px) and (max-width: 767px) {
#nav {text-align:left;}
#nav-icon img {display:inline-block;height:40px;}
#nav ul, #nav:active ul {display:none;position:absolute;padding: 20px;background:#fff;border: 3px solid #DEB887;left:35px;top:70px;width:20%;border-radius:0 0 3px 3px;z-index:9999;}
#nav:hover ul {display:block;}
.navimage {margin-top:-300px;}
#nav li {text-align:center;display:block;}
#nav ul li a {color:#000;padding:0;}
}
The problem is
1. The image (navigation menu) is not showing at all.
2. Facebook and twitter logo cannot be seen.
3. I hover my mouse somewhere within a site but navigation bar randomly showed up (There wasn't any picture of navigation menu)
Here is the JSFIDDLE..
All for mobile screen (min-width: 480px and max-width: 767px). Any ideas?