Foundation off-canvas navigation on mobile only?

Question

I am making an off-canvas navigation using Foundation, however, I only want the off-canvas nav to display on mobile devices, on desktop browsers I will use a standard navigation menu. My question is, can I reuse the code from my off-canvas nav for my desktop nav, or will I have to code 2 separate navigation menus?

Here is what my nav code looks like for the off-canvas nav:

<div class="off-canvas-wrap">
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li {% if page.slug == "index" %}class="active"{% endif %}>
          <a href="/">Home</a>
        </li>
        <li>{% nav site, no_wrapper: true %}</li>
      </ul>
    </aside>

<section class="main-section">
PAGE CONTENT HERE
</section>

<a class="exit-off-canvas"></a>

  </div>
</div>

Thanks in advance!

Answer 1

You'll need to use separate sets of navigation in order to achieve what you're wanting, unfortunately. In order to use both, however, you'll need to structure your website to accommodate the off-canvas menu, but only call the off-canvas menu when you're on small menus. The menu that you'll use within the main part of the site (within the "main-section") will have to be hidden for small to avoid multiple menus showing.

We recently came across this issue with our corporate site and we only wanted to call the navigation once, however it was proving extremely difficult.

Here's a basic example of how the structure would look:

  <div class="off-canvas-wrap">
    <div class="inner-wrap">                

      <nav class="tab-bar show-for-small">
        <section class="left-small">
          <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
         </section>

        <section class="middle tab-bar-section">
          <h1 class="title"><a href="/home"><img id="logoSmall" src="/images/main/header_logo_small.png" /></a></h1>
        </section>
      </nav>

      <aside class="left-off-canvas-menu">
        <ul class="off-canvas-list">
          <li><label>Menu</label></li>
          <li><a>link1</a></li>
          <li><a>link2</a></li>
          <li><a>link2</a></li>
        </ul>
      </aside>



      <section class="main-section">

        <!-- All of your website goes here -->
        <!-- Including the navigation you want to show on medium-and-up-->

      </section>

      <a class="exit-off-canvas"></a>
    </div><!--/innerWrapp-->
  </div><!--/offCanvasWrap-->