Menu icon Foundation

Developer | Ipswich United Kingdom

My Posts

  • 1
    Reply
  • F6 OffCanvas Menu

    By Chris Warnes

    foundation 6sitesoffcanvas

    Hi all, I'm using foundation 6 for Sass (retrieved via bower if it matters) and I'm really struggling to get the off canvas menu working i see it working fine in the docs, but when I copy everything i'm just not getting it to work, when I click the men... (continued)

    Last Reply by Brian Tan almost 4 years ago


My Comments

Chris Warnes commented on Debbie Nelson's post almost 4 years

this shouldn't be a problem just make sure that your top bar is outside of your off-canvas-wrap

see the example below modified from the example on the foundation off-canvas page

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

  <section class="middle tab-bar-section">
    <h1 class="title">Foundation</h1>
  </section>
</nav>
<aside class="left-off-canvas-menu">
  <ul class="off-canvas-list">
    <li><label>Foundation</label></li>
    <li><a href="#">The Psychohistorians</a></li>
    <li><a href="#">...</a></li>
  </ul>
</aside>

<section class="main-section">
  <!-- content goes here -->
</section>

Posts Followed


Following

    No Content

Followers

My Posts


My Comments

You commented on Debbie Nelson's post almost 4 years

this shouldn't be a problem just make sure that your top bar is outside of your off-canvas-wrap

see the example below modified from the example on the foundation off-canvas page

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

  <section class="middle tab-bar-section">
    <h1 class="title">Foundation</h1>
  </section>
</nav>
<aside class="left-off-canvas-menu">
  <ul class="off-canvas-list">
    <li><label>Foundation</label></li>
    <li><a href="#">The Psychohistorians</a></li>
    <li><a href="#">...</a></li>
  </ul>
</aside>

<section class="main-section">
  <!-- content goes here -->
</section>

Posts Followed

Following

  • No Content

Followers

  • No Content