Menu icon Foundation
Off-canvas fixed full-height aside menu?

Hi!

I'm using the off-canvas exemple from Foundation 5. I figure out how to fixed the top-bar nav, but cannot find how to fix the both aside content. Any idea?

<div class="off-canvas-wrap">
  <div class="inner-wrap">
      <div class="fixed">
        <nav class="tab-bar">
          <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">Foundation</h1>
          </section>
    
          <section class="right-small">
            <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
          </section>
        </nav>
    </div>
      
    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
      </ul>
    </aside>

    <section class="main-section">
             <div class="row">
            <div class="large-12 columns">
              <br><br><br><br>
              <h4>The Psychohistorians</h4>
              <p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>
            </div>
      </div>
    </section>

  <a class="exit-off-canvas"></a>
      
      
    <footer>
        <div class="row brown">
            <div class="large-8 large-centered columns green">
                <p>Footer stuff</p>    
            </div>
        </div>
    </footer> 
	     

  </div>
</div>
            

         

The vertical scroll is not working in the aside box. They are already set in the css. Something must interfer.

As well, I wish to set the aside height to the full height 100% of my device, not of the content. How can I do that?

Many thx in advance.

Regards,
Dom

off-canvasmenuaside

Hi!

I'm using the off-canvas exemple from Foundation 5. I figure out how to fixed the top-bar nav, but cannot find how to fix the both aside content. Any idea?

<div class="off-canvas-wrap">
  <div class="inner-wrap">
      <div class="fixed">
        <nav class="tab-bar">
          <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">Foundation</h1>
          </section>
    
          <section class="right-small">
            <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
          </section>
        </nav>
    </div>
      
    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
      </ul>
    </aside>

    <section class="main-section">
             <div class="row">
            <div class="large-12 columns">
              <br><br><br><br>
              <h4>The Psychohistorians</h4>
              <p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>
            </div>
      </div>
    </section>

  <a class="exit-off-canvas"></a>
      
      
    <footer>
        <div class="row brown">
            <div class="large-8 large-centered columns green">
                <p>Footer stuff</p>    
            </div>
        </div>
    </footer> 
	     

  </div>
</div>
            

         

The vertical scroll is not working in the aside box. They are already set in the css. Something must interfer.

As well, I wish to set the aside height to the full height 100% of my device, not of the content. How can I do that?

Many thx in advance.

Regards,
Dom

Rui Alexandre over 4 years ago

I have the same problem...