Try putting your media queries below your default css code like so:
.header-nav-mobile {
float: right;
line-height: 40px;
width: 60px;
height: 40px;
text-align: center;
color: #fff;
background-color: #404040;
cursor: pointer;
display: none;
}
@media only screen
and (min-width : 320px)
and (max-width : 568px) {
.header-nav-mobile {
display: block;
}
#nav {
display: none;
}
}
Working Fiddle: http://jsfiddle.net/25zJX/1/