CSS to show the offcanvas menu only on mobile and tablet. On Large Screens is the menu always visible

foundation.offcanvas.html

	<div class="off-canvas-wrap" data-offcanvas>
		<div class="inner-wrap">
		    <nav class="tab-bar">
			  <section class="left-small">
				<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
			  </section>
 
			  <section class="middle tab-bar-section">
				<h1 class="title">Offcanvas example</h1>
			  </section>
			</nav>
 
			<!-- Off Canvas Menu -->
			<aside class="left-off-canvas-menu">
				<ul>
					<!-- inject:navi -->
					<!-- links will be injected here -->
					<!-- endinject -->
				</ul>
			</aside>
 
			<!-- main content goes here -->
			<section class="main-section">
				<!-- inject:content -->
				<!-- sections will be injected here -->
				<!-- endinject -->
			</section>
 
			<!-- close the off-canvas menu -->
			<a class="exit-off-canvas"></a>
		</div>
	</div>

foundation.offcanvas.mobile-only.css

/** off canvas menu styles **/
.off-canvas-wrap {
    -webkit-backface-visibility: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
 
.off-canvas-wrap.move-right,.off-canvas-wrap.move-left {
    height: 100%;
}
 
.inner-wrap {
    -webkit-backface-visibility: hidden;
    position: relative;
    width: 100%;
    min-height: 100%;
    *zoom: 1;
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -ms-transition: -ms-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
}
 
.inner-wrap:before,.inner-wrap:after {
    content: " ";
    display: table;
}
 
.inner-wrap:after {
    clear: both;
}
 
.left-off-canvas-menu {
    -webkit-backface-visibility: hidden;
    width: 250px;
    top: 0;
/*     bottom: 0; */
    min-height: 100%;
    position: absolute;
    overflow-y: auto;
    z-index: 1001;
    box-sizing: content-box;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 0;
}
 
.left-off-canvas-menu * {
    -webkit-backface-visibility: hidden;
}
 
.right-off-canvas-menu {
    -webkit-backface-visibility: hidden;
    width: 250px;
    top: 0;
    bottom: 0;
    position: absolute;
    overflow-y: auto;
    z-index: 1001;
    box-sizing: content-box;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    right: 0;
}
 
.move-right>.inner-wrap {
    -webkit-transform: translate3d(250px, 0, 0);
    -moz-transform: translate3d(250px, 0, 0);
    -ms-transform: translate3d(250px, 0, 0);
    -o-transform: translate3d(250px, 0, 0);
    transform: translate3d(250px, 0, 0);
}
 
.move-right a.exit-off-canvas {
    -webkit-backface-visibility: hidden;
    transition: background 300ms ease;
    cursor: pointer;
    box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
 
 
.move-left>.inner-wrap {
    -webkit-transform: translate3d(-250px, 0, 0);
    -moz-transform: translate3d(-250px, 0, 0);
    -ms-transform: translate3d(-250px, 0, 0);
    -o-transform: translate3d(-250px, 0, 0);
    transform: translate3d(-250px, 0, 0);
}
 
.move-left a.exit-off-canvas {
    -webkit-backface-visibility: hidden;
    transition: background 300ms ease;
    cursor: pointer;
    box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
.csstransforms.no-csstransforms3d .left-off-canvas-menu {
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
 
.csstransforms.no-csstransforms3d .right-off-canvas-menu {
    -webkit-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
 
.csstransforms.no-csstransforms3d .move-left>.inner-wrap {
    -webkit-transform: translate(-250px, 0);
    -moz-transform: translate(-250px, 0);
    -ms-transform: translate(-250px, 0);
    -o-transform: translate(-250px, 0);
    transform: translate(-250px, 0);
}
 
.csstransforms.no-csstransforms3d .move-right>.inner-wrap {
    -webkit-transform: translate(250px, 0);
    -moz-transform: translate(250px, 0);
    -ms-transform: translate(250px, 0);
    -o-transform: translate(250px, 0);
    transform: translate(250px, 0);
}
 
.no-csstransforms .left-off-canvas-menu {
    left: -250px;
}
 
.no-csstransforms .right-off-canvas-menu {
    right: -250px;
}
 
.no-csstransforms .move-left>.inner-wrap {
    right: 250px;
}
 
.no-csstransforms .move-right>.inner-wrap {
    left: 250px;
}
 
.off-canvas-wrap.move-right {
    overflow-x: hidden;
}
}
 
/** media query styles **/
@media only screen and (min-width: 40.063em) {
    .RWD .move-right a.exit-off-canvas:hover {
        background: rgba(255, 255, 255, 0.05);
    }
}
 
@media only screen and (min-width: 40.063em) {
    .RWD .move-left a.exit-off-canvas:hover {
        background: rgba(255, 255, 255, 0.05);
    }
}
 
@media only screen and (min-width : 80em) {
    section.main-content{
            margin: 0 0 0 250px;
    }
	
	.off-canvas-wrap .left-off-canvas-menu {
		-webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
	}
    
    .off-canvas-wrap .menu-wrap .logoImg {
		display: inline-block;
        margin: 2em 0;
    }
    .off-canvas-wrap .menu-wrap {
        margin: 2.1em 1em;
    }
}