Menu icon Foundation
Off-Canvas Wrap issue in Wordpress

I feel I must be missing something here, and hope someone can't help me out.

When adding an off-canvas menu, it seems that entire content of the page needs to be wrapped within the markup for the off-canvas machinery of Foundation.

If you look in the suggested markup (see below in the comment for the formatted code to say what I refer to) before the "exit-canvas-menu" at the end there is a "main-section" section where apparently all of the page content is meant to go.

My question is how does this work with the modular nature of Wordpress? I want my menus in the header.php file, and for that to be called into all other template files.

As I say, I feel sure I must be missing something, but I just don't get it :(

Hope someone can help.

wordpressoff-canvas-menu

I feel I must be missing something here, and hope someone can't help me out.

When adding an off-canvas menu, it seems that entire content of the page needs to be wrapped within the markup for the off-canvas machinery of Foundation.

If you look in the suggested markup (see below in the comment for the formatted code to say what I refer to) before the "exit-canvas-menu" at the end there is a "main-section" section where apparently all of the page content is meant to go.

My question is how does this work with the modular nature of Wordpress? I want my menus in the header.php file, and for that to be called into all other template files.

As I say, I feel sure I must be missing something, but I just don't get it :(

Hope someone can help.

Andrew Brown almost 6 years ago

Okay, so I can display code in a comment here but not in an original post. Weird. This is how that code should look:

<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" ><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>

        <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">
            <!-- content goes here -->
        </section>

        <a class="exit-off-canvas"></a>

    </div>
</div>

Andrew Brown almost 6 years ago

Anybody have any support on this?

Brandon Arnold almost 6 years ago

Not sure if i fully grasp your question, but you're header would be everything above

<section class="main-section">

and your footer would be everything after
HTML
<!-- content goes here -->
</section>

Once agin, not sure i'm understanding the problem though.

David Gross almost 6 years ago

In my header.php template I added:

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

  <nav class="top-bar" data-topbar>

  <section class="middle tab-bar-section">
      <ul class="title-area">
        <!-- Title Area -->
        <li class="name">
            <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo get_stylesheet_directory_uri().'/images/logo.png'; ?>" /></a>
        </li>
      </ul>
    </section>

    <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
      </section>
    </nav>
  </div>

  <aside class="right-off-canvas-menu">

    <?php
      // Left Nav Section
      if ( has_nav_menu( 'header-menu-left' ) ) {
          wp_nav_menu( array(
              'theme_location' => 'header-menu-left',
              'container' => false,
              'depth' => 0,
              'items_wrap' => '<ul class="left off-canvas-list">%3$s</ul>',
              'fallback_cb' => false,
              'walker' => new cornerstone_walker( array(
                  'in_top_bar' => true,
                  'item_type' => 'li'
              ) ),
          ) );
        }
      ?>

</aside>

Then in my page template I have:

 <section class="main-section">
<-- add your template content here -->
</section>

Then at the top of my footer template:

   <a class="exit-off-canvas"></a>
  </div>
</div>

Hope it helps!

Andrew Brown almost 6 years ago

Hmm, perhaps I'm over-complicating this in my head?

I'll give that a go and report back.

Thanks very much for your time.

James Stone almost 6 years ago

I am not using wordpress but the process should be the same. In your header.php you need to have your off canvas nav code before anything else. Some theme will generate html before header.php partial. Just check your source and compare it to your header.php and see if anything else is rendering there.

The same goes for the footer.php. You should have your code at the absolute end of the file. You don't want to generate any html that renders below it. Loading javascript and non visual elements are okay.

This is the case if you want the menu to act like a typical off canvas nav. Otherwise, it is also possible to embed it within other divs.

I am using Middleman blog so the code is a little different, but you can see how I modified my site to allow for this:

https://github.com/manofstone/manofstone-com-middleman/blob/master/source/_header.html.erb

https://github.com/manofstone/manofstone-com-middleman/blob/master/source/_footer.html.erb

https://github.com/manofstone/manofstone-com-middleman/blob/master/source/layouts/layout.erb

LebCit almost 6 years ago

Hello everyone,

You don't need to hard code it in header.php / index.php / footer.php it will be :
1- to ugly
2- very difficult to manage

The simpler way is thinking like WordPress does exactly like THIS LINK :-)

http://wordpress.stackexchange.com/questions/124988/using-foundation-5-off-canvas-menu-with-wordpress

Hope that I've been helpful ;-)

Raphael Amponsah over 4 years ago

If you are having issues with your wordpress offcanvas, try checking the order of the css files you are using.
this is my offcanvas css

.hold-canvas {
height: 100%;
}
.hold-canvas .inner-wrap{
height: 100%;
}

.left-off-canvas-menu{
height: 1000px !important;
}

.tab-bar{
width: 45px;
background-color: white;
}

.left-small {
width: 2.8125rem;
height: 2.8125rem;
position: absolute;
top: 0;
border-right: solid 1px #1a1a1a;
left: -45px;
z-index: 555555;
}

and it comes before the foundation css file. everything works fine.