Jump to content

sidr menu not working on phone


bravo14

Recommended Posts

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.