Menu icon Foundation
How to wrap page content with off-canvas menu - confusion

Hey Team! Andrew has a question about integrating off-canvas with wordpress. Let's help him out!

--

HI there.

I am trying to integrate Zurb Foundation 5 into a Wordpress theme. I can get it working fine but I'm puzzled by a seeming issue which make it unworkable in Wordpress.

Please see this code for making the off-canvas menu work, and following the code I outline my question:

  <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"></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"></a>
        </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>
        </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">
        <!-- MAIN CONTENT GOES HERE -->
      </section><a class="exit-off-canvas"></a>
    </div>
  </div>
            

         

It seems that all of the page content must be wrapped inside that element near the end - which is all wrapped up inside the "off-canvas-wrap".

If this is so, how does the modular nature of wordpress code work? The entire page would need to be in the header.php, with no modularity.

I feel I must be missing something.

Really hope someone can help.

Best wishes, Andrew.

wordpressoff-canvas

Hey Team! Andrew has a question about integrating off-canvas with wordpress. Let's help him out!

--

HI there.

I am trying to integrate Zurb Foundation 5 into a Wordpress theme. I can get it working fine but I'm puzzled by a seeming issue which make it unworkable in Wordpress.

Please see this code for making the off-canvas menu work, and following the code I outline my question:

  <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"></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"></a>
        </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>
        </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">
        <!-- MAIN CONTENT GOES HERE -->
      </section><a class="exit-off-canvas"></a>
    </div>
  </div>
            

         

It seems that all of the page content must be wrapped inside that element near the end - which is all wrapped up inside the "off-canvas-wrap".

If this is so, how does the modular nature of wordpress code work? The entire page would need to be in the header.php, with no modularity.

I feel I must be missing something.

Really hope someone can help.

Best wishes, Andrew.


Caleb Winters gave the most helpful answer for this post
Caleb Winters over 5 years ago

We don't really use Wordpress at ZURB, but here's how we set it up on PHP sites.

header.php
<div class="off-canvas-wrap">
    <div class="inner-wrap">
nav.php
<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon"></a>
  </section>
</nav>
<aside class="right-off-canvas-menu"><!-- off canvas content here --></aside>
footer.php
    </section><a class="exit-off-canvas"></a>
  </div><!-- /inner-wrap -->
</div><!-- /inner-wrap -->

Then on our layouts, just include all these partials.

layout.php
<?php include_once "header.php" ?>
<?php include_once "nav.php" ?>

<!-- your page layout goes here -->

<?php include_once "footer.php" ?>

Hope this helps.

Caleb Winters over 5 years ago

We don't really use Wordpress at ZURB, but here's how we set it up on PHP sites.

header.php
<div class="off-canvas-wrap">
    <div class="inner-wrap">
nav.php
<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon"></a>
  </section>
</nav>
<aside class="right-off-canvas-menu"><!-- off canvas content here --></aside>
footer.php
    </section><a class="exit-off-canvas"></a>
  </div><!-- /inner-wrap -->
</div><!-- /inner-wrap -->

Then on our layouts, just include all these partials.

layout.php
<?php include_once "header.php" ?>
<?php include_once "nav.php" ?>

<!-- your page layout goes here -->

<?php include_once "footer.php" ?>

Hope this helps.