sidr menu not working on phone

[bravo14]

Hi Guys

 

I have downloaded the sidr menu from http://www.berriart.com/sidr/, the problem is I can't get it to work on a phone, but if I resize the browser then the css will change and the sidr menu will be start working.

 

the css in use is below

 

 

 
body{
font-family: Arial;
}
#header{
width:100%;
vertical-align:center;
height:200px;
vertical-align:bottom;
}
#header img{
width:330px;
}
#header h3{
height:150px;
vertical-align:bottom;
color:#32fa2a;
font-size:16pt;
text-align:center;
}
#container{
max-width:100%;
}
#main_content{
width:100%;
padding-left:200px;
}
.strapline{
float:left;
margin:300px;
font-size:16pt;
}
#address{
width:300px;
float:right;
text-align:right;
}
#side-menu{
position:fixed;
top:300px;
left:0;
width:200px;
font-size:9pt;
background-color:#32fa2a;
color:#FFFFFF;
}
 
#sub{
font-size:9pt;
}
 
#sub li{
list-style:none;
}
#product-list ul{
list-style:none;
}
#product-list li{
border:solid 3px #32fa2a;
text-align:center;
width:210px;
height:210px;
display:block;
float:left;
vertical-align:middle;
margin:5px;
}
 
#product-list li img{
 
max-width:200px;
border:none;
vertical-align:middle;
}
#nav-menu{
margin:10px;
background-color:#32fa2a;
height:40px;
text-align:center;
}
#nav-menu ul{
list-style:none;
}
#nav-menu li{
border:#ffffff solid 3px;
padding:5px;
color:#FFFFFF;
background-color:#32fa2a;
width:100px;
display:block;
float:left;
}
#partners{
width:100%;
height:110px;
text-align:center;
border:#32fa2a 4px solid;
}
#partners ul{
list-style:none;
}
#partners li{
text-align:center;
width:210px;
height:210px;
display:block;
float:left;
vertical-align:middle;
margin:5px;
}
#partners li img{
max-height:85px;
border:none;
vertical-align:middle;
}
#prod-detail{
width:100%;
}
#ben-feat{
width:400px;
float:left;
}
#mobile-header {
display: none;
}
#navigation {
display:none;
}
@media only screen and (max-width: 767px){
#mobile-header {
display: block;
}
#side-menu{
display:none;
width:0;
}
#nav-menu, #address{
display:none;
}
#main-content{
padding:0;
}

 

The display should change when the screen width is less than 767px, do I need to change the css for the other selectors as well?

 

Any help would be fantastic.