Menu icon Foundation
Combine Off-canvas and Top-bar?

I'm trying to figure out how to use a combination of the top-bar navigation and also the off-canvas navigation. So I'd like to show the links across the top bar when on a desktop screen, but when on a smaller screen have that menu icon that slides in from either side using off-canvas. I'm just not quite sure where to put all the classes. Also, is it only possible to use off-canvas if your top navigation bar is at the very top? I was going to try to put it below my logo and site title, but after reading through the off-canvas documentation I'm thinking it may have to be at the top only?

off-canvastop-bar

I'm trying to figure out how to use a combination of the top-bar navigation and also the off-canvas navigation. So I'd like to show the links across the top bar when on a desktop screen, but when on a smaller screen have that menu icon that slides in from either side using off-canvas. I'm just not quite sure where to put all the classes. Also, is it only possible to use off-canvas if your top navigation bar is at the very top? I was going to try to put it below my logo and site title, but after reading through the off-canvas documentation I'm thinking it may have to be at the top only?

Rafi Benkual over 4 years ago

The Foundation website is using this technique.

We created a codepen on how to do this on the get started page - http://foundation.zurb.com/docs/

The codepen - http://codepen.io/ZURBFoundation/pen/vKwHa

Hybrid Off-canvas top-bar http://calebserna.com/foundation-top-bar-offcanvas-hybrid/

Jeremy Mansfield 7 months ago

The tutorials here no longer work or are no longer available.

Jeremy Mansfield 7 months ago

Unfortunately, after looking at the In-Canvas to Off-Canvas as well as the Nested Off-Canvas, it does not do what is most common of mobile navigation patterns:
  1. Sharing the same navigation elements for desktop and mobile.
  2. Having the same navigation elements switch from horizontally wide and top of page on desktop and then to off canvas and left hand panel on mobile.
  3. Most importantly, pushing the content over for the off canvas panel reveal and not simply “overlapping” the page content. This is an unfortunate user experience.
Using Foundation 5, I created this website … http://design.anchortransportation.com.php56-28.ord1-1.websitetestlink.com … and did exactly what I am describing above using this Foundation 5 “hack" that was provided by another developer: http://calebserna.com/foundation-top-bar-offcanvas-hybrid/
 
At the moment, it does not look like it's possible to do all three points above using Foundation 6, which is disappointing. 

George Benthien 7 months ago

The code below illustrates the approach I use. You can go to my website https://gbenthien.net to see how it works.

<nav>
  <!-- off-canvas title bar for 'small' screen -->
  <div class="data-sticky-container" data-sticky-container>
    <div class="sticky" data-sticky data-sticky-on="small" data-options="marginTop: 0;">
      <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
        <div class="title-bar-left">
          <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
          <span class="title-bar-title">Menu</span>
        </div>
        <div class="title-bar-right"></div>
      </div>
    </div>
  </div>

  <!-- off-canvas left menu for "small" screen -->
  <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>
    <ul class="vertical menu">
      <li>
        <a href="file1.html">item1</a>
      </li>
      <li>
        <a href="file2.html">item2</a>
      </li>
      <li>
        <a href="file3.html">item3</a>
      </li>
    </ul>
  </div>

  <!-- "top-bar menu for 'medium' and up -->
  <div data-sticky-container>
    <div id="widemenu" class="top-bar" data-sticky data-options="marginTop:0;">
      <div class="top-bar-left">
        <ul class="menu dropdown" data-dropdown-menu data-close-on-click-inside="false">
          <li>
            <a href="file1.html">item1</a>
          </li>
          <li>
            <a href="file2.html">item2</a>
          </li>
          <li>
            <a href="file3.html">item3</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

You also need to wrap your page content inside of <div class="off-canvas-content" data-off-canvas-content> ...</div>. I hope this helps