I'm having difficulty turning on and off the off-canvas menu in Foundation 5, or at least not always on the canvas. Below is an image of the current site.
As shown, offcanvas is very strong on canvas
This is the HTML that I am still running. Content is not included in a separate YAML file, but this is optional.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/assets/img/logo/sjpminilogo.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }} | Paly SJP</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/syntax.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/foundation/css/foundation.css">
<link rel="stylesheet" href="/assets/foundation/css/normalize.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<script type="text/javascript" src="/assets/foundation/js/custom.modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
</head>
<body>
<div class="site">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="header">
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1><a href="/">Paly SJP</a></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="name">
<a href="/about.html">ABOUT US</a>
</li>
<li class="name">
<a href="/calendar.html">CALENDAR</a>
</li>
<li class="has-dropdown not-click"><a href="#">COHORTS</a>
<ul class="dropdown">
<li><a href="/cohorts/one/about.html">COHORT 1</a></li>
<li><a href="/cohorts/two/about.html">COHORT 2</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>
Paly SJP
</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Menu</label>
</li>
<li>
<a href="/">Paly SJP</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="about.html">Calendar</a>
</li>
<li>
<label>Cohorts</label>
</li>
<li style="background-color: #3B3B3B">
<a href="/cohort/one.html">Cohort 1</a>
</li>
</ul>
</aside>
<div class="content">
{{ content }}
</div>
<div class="footer">
<div class="row">
<div class="large-12 columns">
<h6 style="color:#ffffff; margin-top:24px; font-size:14px;">Keep in touch!</h6>
<a href="https://twitter.com/palysocjustice" target="_blank">
<img src="/assets/img/logo/footer/twitter.png" class="logo" /></a>
<a href="https://www.facebook.com/pages/Paly-Social-Justice-Pathway/1481478495402897" target="_blank">
<img src="/assets/img/logo/footer/facebook.png" class="logo" /></a>
<a href="http://palysocialjustice.blogspot.com/" target="_blank">
<img src="/assets/img/logo/footer/blogspot.png" class="logo" /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/assets/foundation/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.clearing.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript" src="/assets/js/custom.js"></script>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
source
share