Foundation: Problems combining responsive top-bar and tab-bar Menus

Question

I am trying to create a new site template based on Zurb's Foundation 5 that has two menus - a top menu and a left menu. That is working for medium and large sizes, but for 'small' I'm trying to hide the top menu with a top-right "hamburger", and then the left menu to work in a similar manner but from the top-left. This is what it looks like at the moment:

The top right works fine, except only the 'hamburger' menu-icon is clickable. The "MENU" text next to it, is not.

The top left has a couple of problems. Only the text that I add appears and is clickable ("TOG" here). The menu-icon does not appear. I guess I could replace "TOG" with "PAGES" as a workaround.

Second, when I click on it to open the menu, it pushes the top bar down one row to cover the title and leaving a white space at the top. Ie.:

Here's my code (very much work in progress - logos will be replaced with images, etc):

<div class="off-canvas-wrap" data-offcanvas>
 <div class="inner-wrap">    
  <div class="fixed">
   <nav class="top-bar " data-topbar role="navigation">
    <section class="left-small hide-for-medium-up">
     <a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
    </section>

    <section class="middle tab-bar-section hide-for-medium-up">
       <h1><a href="/">LOGO</a></h1>
    </section>

  <ul class="title-area">
    <li class="name">
      <h1 class="hide-for-small"><a href="/">Logo</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">Search</a></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Articles</a></li>
      <li><a href="#">Constituents</a></li>
      <li><a href="#">Engineers</a></li>
      <li><a href="#">Shipping</a></li>
      <li><a href="#">Locomotives</a></li>
      <li><a href="#">Rolling Stock</a></li>
      <li><a href="#">References</a></li>
      <li><a href="#">Forums</a></li>
    </ul>
  </section>
</nav>    
</div>    

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>LNER</label></li>
        <li><a href="gresley.shtml">Gresley</a></li>
        <li><a href="thompson.shtml">Thompson</a></li>
        <li><a href="peppercorn.shtml">Peppercorn</a></li>
      </ul>
    </aside>    

<section class="main-section">

          <div class="row">
            <div class="large-2 medium-3 columns">
              <div class="hide-for-small">
                <div class="sidebar">        
<nav>    
<ul class="side-nav">
 <li><label>LNER</label></li>
 <li><a class="active" href="gresley.shtml">Gresley</a></li>
 <li><a href="thompson.shtml">Thompson</a></li>
 <li><a href="peppercorn.shtml">Peppercorn</a></li>
 <li class="divider"></li>
</ul>    
</nav>
                 </div>
              </div>
          </div>

<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">

   <h1>Sir Nigel Gresley</h1>

Does anyone have any thoughts as to what is causing my problems?

Answer 1

As far as i do understand you're trying to use Foundation's Off-canvas (menus) in a manner it is not intended.

It seems you are looking for a mobile menu which can be toggled.

Off-canvas (menus) are a layout structure. When the menu shows up the complete layout moves to the left / right. For that reason you content should be wrapped in the Off-canvas (menus) structure:

From http://foundation.zurb.com/docs/components/offcanvas.html:

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

    <a class="left-off-canvas-toggle" href="#" >Menu</a>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        ...
        </ul>
    </aside>

    <!-- main content goes here -->


  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div>
</div>

See the <!-- main content goes here --> in the above. You can try to rebuild your example as follows:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
<div class="off-canvas-wrap" data-offcanvas>
 <div class="inner-wrap">    
  <div class="fixed">
   <nav class="top-bar " data-topbar role="navigation">
    <section class="left-small hide-for-medium-up">
     <a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
    </section>

    <section class="middle tab-bar-section hide-for-medium-up">
       <h1><a href="/">LOGO</a></h1>
    </section>

  <ul class="title-area">
    <li class="name">
      <h1 class="hide-for-small"><a href="/">Logo</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">Search</a></li>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Twitter</a></li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Articles</a></li>
      <li><a href="#">Constituents</a></li>
      <li><a href="#">Engineers</a></li>
      <li><a href="#">Shipping</a></li>
      <li><a href="#">Locomotives</a></li>
      <li><a href="#">Rolling Stock</a></li>
      <li><a href="#">References</a></li>
      <li><a href="#">Forums</a></li>
    </ul>
  </section>
</nav>    
</div>

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

    <a class="left-off-canvas-toggle  hide-for-medium-up" href="#" >Menu</a>

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu  hide-for-medium-up">
        <!-- whatever you want goes here -->
     <ul class="off-canvas-list">
        <li><label>LNER</label></li>
        <li><a href="gresley.shtml">Gresley</a></li>
        <li><a href="thompson.shtml">Thompson</a></li>
        <li><a href="peppercorn.shtml">Peppercorn</a></li>
      </ul>
    </aside>

    <!-- main content goes here -->


<section class="main-section">

          <div class="row">
            <div class="large-2 medium-3 columns">
              <div class="hide-for-small">
                <div class="sidebar">        
<nav>    
<ul class="side-nav">
 <li><label>LNER</label></li>
 <li><a class="active" href="gresley.shtml">Gresley</a></li>
 <li><a href="thompson.shtml">Thompson</a></li>
 <li><a href="peppercorn.shtml">Peppercorn</a></li>
 <li class="divider"></li>
</ul>    
</nav>
                 </div>
              </div>
          </div>


<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">

   <h1>Sir Nigel Gresley</h1>
</div>

  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div>
</div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>



</html>

Possible also how to make bootstrap off canvas nav overlap content instead of move it will help you further.