I'm using the Zurb Foundation 6 framework on this website http://hlb-mann-judd.businesscatalyst.com. Everything is good apart from the mobile navigation not opening for pages that are in a second tier heirarchy. Here's a link where the problem occurs http://hlb-mann-judd.businesscatalyst.com/software/myob The mobile nav bars appear but they don't function anymore
Nothing is different on these pages apart from the fact that they have a second tier path name and I've checked that the second tier pages have the correct path name for all relevant files so it's not that that's causing the problem (though I figure it has something to do with it somehow). If anybody can advise me as to what is required to fix this I'd appreciate it heaps.
Here's the relevant code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/foundation.css" />
<link rel="stylesheet" href="/css/app.css" />
<link rel="stylesheet" href="/css/style-custom.css" />
</head>
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner">
<!--Mobile Navigation-->
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas data-position="left">
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<ul class="mobile-ofc vertical menu">
<!--MOBILE NAVIGATION LINKS HERE -->
</ul>
</div>
<!--end Mobile Navigation-->
<header class="inner-header-bg">
<div class="off-canvas-content">
<!-- Info Banner For Announcements or Links -->
<a href="/index.html" id="notice">
<div class="info">
<img src="/_assets/img/hlb-mann-judd-logo-mobile.png" alt="logo" />
</div>
</a>
<div class="row">
<!-- desktop nav-->
<nav class="marketing-topbar show-for-medium">
<div class="desktopMenuWrap">
<ul class="dropdown menu" data-dropdown-menu data-click-open="false">
<!--DESKTOP NAVIGATION LINKS HERE -->
</ul>
</div>
</nav>
<!-- end desktop nav-->
</div>
<div class="title-bar hide-for-medium">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
</div>
</div>
</div>
</header>
<!-- end header -->
</div>
</div>
<!-- scripts -->
<script src="/js/vendor/jquery.min.js"></script>
<script src="/js/foundation.min.js"></script>
<script src="/js/mobileApp.js"></script>
<script type="text/javascript" src="/js/scroll/jquery.scrollTo.js"></script>
<script type="text/javascript" src="/js/scroll/jquery.smoothAnchors.js"></script>
</body>
