MO30 Qari MO30 Qari - 6 months ago 7
jQuery Question

my responsive menu doesn't work in mobile devices

i made a responsive menu-bar that collapsed in screen max-width=850 pixel. it is working correctly in desktop different sizes. but doesn't work in mobile devices.






$(document).ready(function(){
$(".showMenu").click(function(){
$(".objs").slideToggle("slow");
});
});



#menu{
background-color: gray;
height: 50px;
}

.obj{
display: inline-block;
background-color: wheat;
margin: 2px;
width: 100px;
text-align: center;
height: 26px;
border:0;
}

.showMenu {
display: none;
height: 100%;
background-color: inherit;
border: 0;
color: black;
outline: 0;
}
@media screen and (min-width: 850px){
.objs{
display: block !important;
}
.obj{
display: inline-block !important;
}
.showMenu{
display: none;
}

}
@media screen and (max-width: 850px){
.objs{
display: none;
width: 100%;
background-color: wheat;
}
.obj{
width: 90%;
}
.showMenu{
display: block;
}

}

<!DOCTYPE html>
<html>
<head>
<title>Responsive Menu</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

</head>
<body>
<div id="menu">
<button class="showMenu">MENU</button>
<div class="objs">
<button class="obj">1</button>
<button class="obj">2</button>
<button class="obj">3</button>
<button class="obj">4</button>
<button class="obj">5</button>
<button class="obj">6</button>
</div>
</div>
</body>
</html>




Answer

Just add below coded the header tag of your html

<meta name="viewport" content="width=device-width, initial-scale=1">
Comments