My client believes that the off canvas menu on my website is not functioning properly. Despite no errors appearing in the console, I am unable to test it myself as I do not own an iPhone or iPad. Would anyone be able to help troubleshoot this? View demo here
html:
<html>
<body>
<div id="site-wrapper" class="container">
<nav id="site-menu">
<ul class="nav">
<li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
<ul class="nav-child unstyled small">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
<ul class="nav-child unstyled small">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</nav>
<header id="header">
<a class="brand" href="/">My Company</a><br />
</header>
<div id="site-canvas">
<div id="mainbody">
<div class="container-fluid">
<p>main content</p>
</div>
</div>
<footer>
<p>footer</p>
</footer>
</div>
</div>
</body>
</html>
css/less:
header {
position: fixed;
top: 0;
z-index: @z-index * 6;
overflow: hidden;
width: 100%;
height: 65px;
}
#site-wrapper {
.reset-box;
}
#mainbody {
width: @100;
margin: 65px auto 0;
}
#menuToggle {
position: fixed;
top: 15px; left: 0;
z-index: @z-index * 7;
}
#menuButton {
background-color: @black;
margin: 0;
padding: 0;
height: 35px;
width: 50px;
}
#menuButton:hover {background-color: @black-hover;}
#site-menu {
background-color: @black;
height: @100;
position: fixed;
top: 0; left: -340px;
width: 330px;
z-index: @z-index * 5;
}
#site-menu:after {z-index: @z-index * 7;}
#site-canvas {
backface-visibility: hidden;
height: @100;
transform: translateX(0);
transform: translate3d(0, 0, 0);
width: @100;
}
/********************************
/* OFF CANVAS MENU
/*******************************/
.show-nav #site-canvas {
transform: translateX(330px);
transform: translate3d(330px, 0, 0);
}
...
and last but not least the js:
/********************************
/* OFF CANVAS MENU
/*******************************/
$(document).ready(function(){
var special = ['reveal'];
$('.main-menu').click(function() {
var transitionClass = jQuery(this).data('transition');
if ($.inArray(transitionClass, special) > -1) {
$('body').removeClass();
$('body').addClass(transitionClass);
} else {
$('body').removeClass();
$('#site-canvas').removeClass();
$('#site-canvas').addClass(transitionClass);
}
$('#site-wrapper').toggleClass('show-nav');
$('.main-menu i').toggleClass('fa-ellipsis-v fa-ellipsis-h');
$('.main-menu div').toggle();
return false;
});
});
/********************************
/* OFF CANVAS MENU HEIGHT
/*******************************/
$(document).ready(function(){
$('#site-canvas').css({'min-height':($(window).height())+'px'});
$(window).resize(function(){
$('#site-canvas').css({'min-height':($(window).height())+'px'});
});
});
/********************************
/* NAV ACCORDIAN
/*******************************/
$(document).ready(function(){
$('.accordian-toggle').click(function(){
$('#site-menu .nav > .parent > .nav-child').slideUp();
if(!$(this).next().is(':visible')){
$(this).next().slideDown();
}
});
});