CODEWITHSUNDEEP
wordpress-themingzurb-foundation
Andrew Brown
Andrew Brown

Reputation: 47

Zurb Foundation 5 Off-Canvas menu in Wordpress

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

Upvotes: 0

Views: 1558

Answers (3)

user3250863
user3250863

Reputation: 11

First of all you need to make foundation no conflict in Wordpress

http://naileditdesign.com/making-foundation-5-framework-no-conflict-in-wordpress/

otherwise the Javascirpt wont fire to open the drawer

This is the HTML code below that gets it working in Wordpress ...

<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar hide-for-large-up">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</section>
<section class="middle tab-bar-section logo">
<!--centre content logo or something -->
</section>
</nav>
<aside class="left-off-canvas-menu">
 <!--Menu Here -->
</aside>
<section class="main-section">
<!-- content goes here -->
<-! Above this in this in header.php -->
<-! below this in footer.php -->
</section>
<a class="exit-off-canvas"></a>
</div>
</div>

Upvotes: 1

olefredrik
olefredrik

Reputation: 21

The off-canvas needs to be registered with wordpress, in addition to the code in header and footer.

Check this demo for a working example on Foundation 5 + WordPress off-canvas menu.

The source code is also available on Github

Upvotes: 0

Jordan
Jordan

Reputation: 96

I'm currently working on this now, but what you can do is start your wrap in the header.

End your wrap in the footer.

Upvotes: 0

Related Questions