Menu icon Foundation
Why is the Responsive Table breaking Off-Canvas Nav?

Hi all!
First post here. ZURB lemme just say, love you guys.

Having a problem with the off-canvas nav on just one of my pages, the one with a table.

Question: Did I miss this as a known issue? Is the something I overlooked in the markup?

I've got the off-canvas nav bar working great on my index page and all of the sub-pages, with the exception of a page where I have a table based on Zurb's responsive tables. For whatever reason, on that page only, the links inside the off canvas nav don't work; the whole list just closes the nav (moves it back off-canvas). I tried duplicating one of the functioning pages and removing all the body content, then putting in the table markup.

I noticed that all body content must be inside the closing tags that being the off-canvas nav. (code attached)

<head>...</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <nav class="tab-bar">
          <section class="middle tab-bar-section">
          <h1 class="main"></h1>
          </section>
              <section class="right-small">
              <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
              </section>
      </nav>
       <aside class="right-off-canvas-menu">
        <ul class="off-canvas-list">
          <a href="index.html"><li><label>SITE NAME</label></li></a>
          <li class="has-submenu"><a href="wines.html">01 Button</a>
            <ul class="right-submenu">
              <li class="back"><a href="#">MAIN MENU</a></li>
              <a href="wines.html"><li><label>01 Button</label></li></a>
              <li><a href="wines.html">01 Button Drop 1</a></li>
              <li><a href="wines.html">01 Button Drop 2</a></li>
              <li><a href="wines.html">01 Button Drop 3</a></li>
              <li class="back"><a href="#">Main Menu</a></li>
            </ul>
          </li><!--close Our Wines Menu Button-->
          <li><a href="designs.html">02 Button</a></li>
          <li><a href="stores.html">03 Button</a></li>
           <li><a href="amazon.html">04 Button</a></li>
          <li><a href="contact.html">05 Button</a></li>
        </ul>
      </aside>
      
      <!--all other body content in divs here
        iframes with youtube videos, divs w/ & w/o rows, etc. work on all the other pages
        -->
      
      
        </section><!--ALL MAIN CONTENT MUST BE INSIDE THIS CLOSING SECTION TAG OR THE NAV TAB WONT WORK-->
    <a class="exit-off-canvas"></a>
  </div><!--end the inner-wrap-->
</div><!--end the off-canvas-wrap-->

responsive tablesOff Canvas Navdiv treeoff-canvas-wrapinner-wrapexit-off-canvassection

Hi all!
First post here. ZURB lemme just say, love you guys.

Having a problem with the off-canvas nav on just one of my pages, the one with a table.

Question: Did I miss this as a known issue? Is the something I overlooked in the markup?

I've got the off-canvas nav bar working great on my index page and all of the sub-pages, with the exception of a page where I have a table based on Zurb's responsive tables. For whatever reason, on that page only, the links inside the off canvas nav don't work; the whole list just closes the nav (moves it back off-canvas). I tried duplicating one of the functioning pages and removing all the body content, then putting in the table markup.

I noticed that all body content must be inside the closing tags that being the off-canvas nav. (code attached)

<head>...</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
    <div class="inner-wrap">
      <nav class="tab-bar">
          <section class="middle tab-bar-section">
          <h1 class="main"></h1>
          </section>
              <section class="right-small">
              <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
              </section>
      </nav>
       <aside class="right-off-canvas-menu">
        <ul class="off-canvas-list">
          <a href="index.html"><li><label>SITE NAME</label></li></a>
          <li class="has-submenu"><a href="wines.html">01 Button</a>
            <ul class="right-submenu">
              <li class="back"><a href="#">MAIN MENU</a></li>
              <a href="wines.html"><li><label>01 Button</label></li></a>
              <li><a href="wines.html">01 Button Drop 1</a></li>
              <li><a href="wines.html">01 Button Drop 2</a></li>
              <li><a href="wines.html">01 Button Drop 3</a></li>
              <li class="back"><a href="#">Main Menu</a></li>
            </ul>
          </li><!--close Our Wines Menu Button-->
          <li><a href="designs.html">02 Button</a></li>
          <li><a href="stores.html">03 Button</a></li>
           <li><a href="amazon.html">04 Button</a></li>
          <li><a href="contact.html">05 Button</a></li>
        </ul>
      </aside>
      
      <!--all other body content in divs here
        iframes with youtube videos, divs w/ & w/o rows, etc. work on all the other pages
        -->
      
      
        </section><!--ALL MAIN CONTENT MUST BE INSIDE THIS CLOSING SECTION TAG OR THE NAV TAB WONT WORK-->
    <a class="exit-off-canvas"></a>
  </div><!--end the inner-wrap-->
</div><!--end the off-canvas-wrap-->
Rafi Benkual about 4 years ago

Do you have a live page where we test this?

Bobby Fritze about 4 years ago

Hi Rafi, thank you for the reply; right here: http://sppreview.scratchpadcellars.com/stores.html

Agustin Sevilla about 4 years ago

Looks to me that is has to do with where you have .exit-off-canvas in your markup.

On pages like http://sppreview.scratchpadcellars.com/amazon.html it is the last element inside the .row starting under the BEGIN the OUR WINES - YOUR DESIGNS ROW comment - line 157

On the page in question, the .exit-off-canvas appears on line 553 - it is the last item inside the .inner-wrap - which is correct normally. I got it to work by moving the exit-off-canvas so it is the last item in the .main-section (up two lines to 551) and it worked as intended.

Bobby Fritze about 4 years ago

Agustin, thank you very much for playing with it.
Moving the class="exit-off-canvas" UP inside the /section as you suggested actually did not work for me, but moving it outside the off-canvas-wrap div did happen to work. Funky!
It fixed the issue in question for IE11, Chrome 43.0.2357.124 on OSX and Chrome for Android Lollipop.

So now, the markup looks like so (my comment on the section is true for all other pages... :
HTML
</section><!--ALL MAIN CONTENT MUST BE INSIDE THIS CLOSING SECTION TAG OR THE NAV TAB WONT WORK-->
</div><!--end the inner-wrap-->
</div><!--end the off-canvas-wrap-->
<a class="exit-off-canvas"></a>