Foundation Off Canvas Support Now Available

Over the weekend, I received quit a few emails asking if Foundation Off-Canvas support was included in WP-Forge and if not when was it going to be added. Well I am happy to say that I did take some time and finally added the Foundation Off Canvas feature to WP-Forge. And I must say, I am very happy with the result and I hope you will be as well.

You will notice here on I have the regular menu set to Contain-To-Grid-Sticky but when you view the site on a mobile device, the Foundation Off Canvas menu functionality kicks in. Pretty darn spiffy aint it. This is also true for both of the demo sites: WP-Forge Demo and WP-Starter Demo

I did look over the documentation over at Foundation and found it to be extremely easy to accomplish. So the question is “Why didn’t I do this before?” The answer, to be honest, is I have no idea. I guess it may be due to the fact that as a developer I want to please anyone and everyone who may use WP-Forge and the inherent fear that I may end up doing it wrong. It may also be due to the fact that not everyone will be happy with how I did it. I suppose to that end, I finally added Foundation Off Canvas the way I would want it added in other themes and the end result, at least for myself, is awesome!

Foundation Off Canvas How To

When you download the new update, you will notice there is a new section under “Customize” called Off-Canvas. In this new section you have two options available to you. The first option allows you to choose the Off-Canvas menu for mobile view. This means that when users view your site on a mobile device or small tablet, they will see the Foundation Off Canvas menu, despite the options that you have set in the Navigation Section.

The second option allows you to choose which side the Foundation Off Canvas menu will display, either from the left or from the right. I prefer the left myself, so this was set as the default.


Now if you are using WP-Starter along with WP-Forge you may have to add a few snippets of code if you are using your own customized

header.php file. If this is the case you will need to add the following just after the opening body tag:

<?php get_template_part( 'content', 'off_canvas' ); ?>

If you are using your own modified footer.php file then you will need to add the following in between the closing wrapper div and the backtotop div so it looks like this:

</div><!-- #wrapper -->
<?php if( get_theme_mod( 'wpforge_mobile_display' ) == 'yes') { ?>    
      <a class="exit-off-canvas"></a>
    </div><!-- .inner-wrap -->
</div><!-- #off-canvas-wrap -->
<?php } // end if ?>
    <div id="backtotop">Top</div><!-- #backtotop -->

of course if you are using WP-Starter and have not modified any files then you do not have to add anything.

And there you have it folks. I hope you enjoy the new Foundation Off Canvas option as much as I do. I would like to know your thoughts on this new feature.

12 thoughts on “Foundation Off Canvas Support Now Available

    • Anytime Phil, I believe yours was the last question that made get off my butt and get it implemented. I hope it works out great for you and if you can, please share what you do with the theme.

  1. Yes, I will share(eventually). My next request would be to somehow integrate some .htaccess tweaks for URL Rewrites to make the url path directories a little tidier & to be less obvious they are wordpress ie:

    wp-content/themes/wp-forge/css/ into /assets/css/
    wp-content/themes/wp-forge/js/ into /assets/js/
    wp-content/themes/wp-forge/assets/img/ into /assets/img/
    wp-content/themes/wp-forge/ into /plugins/

    I am learning slowly but I’m still far away from calling myself a developer & something like this is way out of my (current) skill set.
    Thanks again.

    • Hmmmm, I believe that this is something that is done directly within the site .htaccess file itself if I am not mistaken, not within the actual theme. I do know that having a .htaccess file within the theme folder is against the WordPress Theme Coding Standards and I have developed WP-Forge in accordance to those standards.

      If possible, maybe this discussion could be moved to the forum area under WP-Forge Feature Request

  2. Awesome work! Very cool.. love that off-canvas feature and I think I like the sticky nav even more.. all in all these features just takes it all up another notch!



  3. Nice post and great work Thomas! Good Off-canvas navigations are particularly hard to find since they are usually required to do so many things: To open left, right, top, bottom, overlap, push, contain submenus, work with sticky or fixed triggers and more.

    Thanks to lots of feedback there was a push to build a better Off-canvas. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

    • Thanks for the visit and the comment Rafi. I have been so busy working on a new theme that I haven’t been following all the latest happenings over at Zurb.

      This new Off-Canvas looks sick as hell!!! This is def a major improvement. Going to update WP-Forge as soon as possible with all of the new improvements.

      Thanks again for stopping by.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.