I am using sidr as side menu for my website. But when I open it in chrome browser at my phone. It opens when I click the button. But doesn't close when I click the button again. If I use the dolphin browser, it just works fine.
I've created a Fiddle.. This is my code which opens and closes the menu perfectly, doesn't seem to work here.
JS:
$('#responsive-menu-button').sidr({
name: 'sidr',
source: '#menu',
side: 'left'
});
CSS:
#mobile-header {
display: block;
position: absolute;
top: 15px;
right: 0;
}
#mobile-header #responsive-menu-button {
height: 41px;
width: 42px;
display:block;
}
#menu {
display: none;
}
HTML:
<div id="mobile-header"> <a id="responsive-menu-button" href="#menu">THE MENU</a>
</div>
<div id="menu">
<ul>
<li><a class="menu first" href="#first">First</a>
</li>
<li><a class="menu second" href="#second"> Second</a>
</li>
<li><a class="menu third" href="#third">third</a>
</li>
<li><a class="menu fourth" href="#fourth">fourth</a>
</li>
</ul>
</div>
Also my viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The code you provided is okay. Additional JavaScript for open/close needed, as you know. This works in web and mobile versions of Google Chrome.
Please notice where
jQuery(".sidr-class-sub-menu").hide();
is situated.