Menu icon Foundation

Designer | San Francisco

Seasoned freelancer, web dev't, graphic design, SEO. All things art & tech.

My Posts


My Comments

Zachary Straub commented on Zachary Straub's post almost 4 years

Hi Rafi,

Thank you for your suggestion. I was unfortunately not able to get an offcanvas to work with that solution, but was able to get one working by following this article:

http://webdesign.tutsplus.com/articles/build-a-top-bar-off-canvas-navigation-with-foundation-5--webdesign-17767

I stripped all of the original top-bar code out of my navigation module and commented out all of the custom styles I had previously and just c/p'd the rails links inside the code samples listed in the article.

It took me a few minutes to figure this out, but I was then able to turn on the offcancas by adding "data-offcanvas" inside the "off-canvas-wrap" class, referenced in this SO post, 1st comment:
http://stackoverflow.com/questions/20792459/zurb-foundation-5-offcanvas-not-working/27194862#27194862

For others reading, the app we're using uses SCSS and Rails so all of our libraries and plugins files are imported automatically. You may need to plug your libraries in manually. Format looks like this:

<html>
<head></head>
    <body>
        <div class="off-canvas-wrap" data-offcanvas>
            <div class="inner-wrap">
                <header>
                    <nav</nav>
                </header>
                <div class="main-content">
                     <h2>Main Content Goes here</h2>
                </div>
            </div>
            <!-- end inner wrap -->
        </div>
        <!-- end off-canvas wrap -->
        <footer>
    </body>
</html>

Thanks and hope this helps!

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Zachary Straub's post almost 4 years

Hi Rafi,

Thank you for your suggestion. I was unfortunately not able to get an offcanvas to work with that solution, but was able to get one working by following this article:

http://webdesign.tutsplus.com/articles/build-a-top-bar-off-canvas-navigation-with-foundation-5--webdesign-17767

I stripped all of the original top-bar code out of my navigation module and commented out all of the custom styles I had previously and just c/p'd the rails links inside the code samples listed in the article.

It took me a few minutes to figure this out, but I was then able to turn on the offcancas by adding "data-offcanvas" inside the "off-canvas-wrap" class, referenced in this SO post, 1st comment:
http://stackoverflow.com/questions/20792459/zurb-foundation-5-offcanvas-not-working/27194862#27194862

For others reading, the app we're using uses SCSS and Rails so all of our libraries and plugins files are imported automatically. You may need to plug your libraries in manually. Format looks like this:

<html>
<head></head>
    <body>
        <div class="off-canvas-wrap" data-offcanvas>
            <div class="inner-wrap">
                <header>
                    <nav</nav>
                </header>
                <div class="main-content">
                     <h2>Main Content Goes here</h2>
                </div>
            </div>
            <!-- end inner wrap -->
        </div>
        <!-- end off-canvas wrap -->
        <footer>
    </body>
</html>

Thanks and hope this helps!

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content