-
Reply
Hi guys,
I've implemented the fix from @David Govea (Thanks!) to have a fixed off-canvas menu on mobile. The thing works great and all on my android phone, but when I get on an iPhone and open the menu, I can't scroll the off-canvas list.
Another thing is I always have a white bar under the off-canvas list that seems to match the height of the browser's top bar. Anyone got a fix for that?
THANKS :)
<div class="off-canvas-wrap" data-offcanvas> <div class="fixed off-canvas-fixed"> <nav class="tab-bar hide-for-large-up" id="nav-bg-small"> <section class="left tab-bar-section"><img href="index.html" src="img/Beehivr-logo-white.svg" alt="Beehivr Logo" width="150px"></section> <section class="right-small"> <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a> </section> <div class="lang-switcher"> <a href="#" onclick="this.href=this.href.replace('/fr/','/en/')">Fr</a> </div> </nav> <aside class="right-off-canvas-menu hide-for-large-up"> <ul class="off-canvas-list"> <li><a href="index.html">home</a></li> <li><a href="#">tour</a></li> <li class="has-dropdown"><a>platform</a> <ul class="off-canvas-list"> <li><a href="#">Who Benefits</a></li> <li><a href="#">Use Cases</a></li> </ul> </li> <li><a href="#">design studio</a></li> <li><a href="company.html">company</a></li> <li><a href="#">blog</a></li> </ul> </aside> </div> <div class="inner-wrap"> <a class="exit-off-canvas hide-for-large-up"></a> <div class="contain-to-grid fixed"> <div class="lang-switcher hide-for-medium-down"> <a href="#" onclick="this.href=this.href.replace('/fr/','/en/')">Fr</a> </div> <nav class="top-bar hide-for-medium-down" data-topbar> <div class="nav-bg"></div> <ul class="title-area"> <li class="name"> <a href="index.html"><img src="img/Beehivr-logo-white.svg" alt="Beehivr Logo" width="150px" ></a> </li> </ul> <section class="top-bar-section"> <ul class="right"> <li><a href="index.html">home</a></li> <li><a href="#">tour</a></li> <li class="has-dropdown not-click"> <a href="#">platform</a> <ul class="dropdown"> <li><a href="#">Who Benefits</a></li> <li><a href="#">Use Cases</a></li> </ul> </li> <li><a href="#">design studio</a></li> <li><a href="company.html">company</a></li> <li><a href="#">blog</a></li> <li><a class="small button round" id="request-top" href="#">request a demo</a></li> </ul> </section> </nav> </div> <!-- ****CONTENT**** --> <section class="main-section"> <!--STUFF--> </section> <!-- End Main-section stuff --> </div><!-- End Inner wrap --> </div><!-- End Off-Canvas-wrap -->
/* Off canvas styling*/ .tab-bar{ height: 5.188rem; line-height: 3.5rem; background: none; } .tab-bar-section{ height: 5rem; padding: 0 0.875em; } .right-small{ border-left: none; padding-top: 1.3em; width: 4em; height: 4em; } .left.tab-bar-section img{ margin-left: 0.1875em; margin-top: 1.25em; } .move-left .exit-off-canvas{ background: rgba(21,21,21,0.3); } ul.off-canvas-list li a{ border-bottom: none; padding: 1.5rem; border-bottom: none; text-transform: capitalize; } ul-off-canvas-list a:hover { font-weight: 300; } /* OFF-CANVAS-FIXED FIX */ .off-canvas-fixed { -webkit-transition: -webkit-transform 500ms ease; transition: transform 500ms ease; } .move-left > .off-canvas-fixed { height: 100%; -webkit-transform: translate3d(-15.625rem, 0, 0); transform: translate3d(-15.625rem, 0, 0); } .right-off-canvas-menu { -webkit-transform: none; transform: none; margin-right: -15.625rem; height: 100vh; background: rgba(21,21,21,1); }
Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!
http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63