Off-Canvas Menu

The off-canvas menu uses the Off-Canvas Component from Foundation 6. To use this menu type, change the template part in header.php to:

<?php get_template_part( 'parts/nav', 'offcanvas' ); ?>

View Off-Canvas Menu Demo

  • David Stingl

    Thank you for this great WP starter theme with Foundation 6 integration!
    My question: How can I modify the Off-Canvas Menu Demo to keep the top bar sticky?
    Many thanks in advance!

  • Brian

    I was able to get the sticky menu to work with JointsWP, but about 1/2 of the way down the page I lose the menu completely. Any thoughts on what might be wrong? I’m running a completely new local WP install and have followed the directions from the Foundation 6 docs on setting up a sticky container. I’m using the offcanvas nav. Thanks.

    • Jeremy Englert

      It looks like there may be some bugs with the sticky component. Have you tried replicating the code with a static HTML site? That will help narrow down the issue.

  • Rafael Figueiredo

    Hi, I want to close the off-canvas with a button. I tried to add the tag ‘a’ with “class exit-off-canvas” like the doc says, but nothing happens.

  • titaniumbones

    Am I right that in multi-level off-canvas menus, if a top-level menu item is a link, that link will not be accessible to users? So, clicking on a top-level item that has children will toggle the visibility of children, rather than following the link in the top-level item?

    And if that’s right, do you know of a workaround?
    (Also: thanks for an amazing theme, I’m loving it)

    • Jeremy Englert

      Drilldown now has a parent_link option:

      • titaniumbones

        ah, cool. Not sure if I quite understand how to access it. I just updated with “gulp bower”, then changed the “menu_class” parameters in joints_top_nav and joints_off_canvas_nav in assets/functions/menu.php like this:

        function joints_top_nav() {
        ‘container’ => false, // Remove nav container
        ‘menu_class’ => ‘vertical medium-horizontal menu parentlink’, // Adding custom nav class
        ‘items_wrap’ => ‘%3$s’,
        ‘theme_location’ => ‘main-nav’, // Where it’s located in the theme
        ‘depth’ => 5, // Limit the depth of the nav
        ‘fallback_cb’ => false, // Fallback function (see below)
        ‘walker’ => new Topbar_Menu_Walker()

        The new menu classes show up but the behaviour doesn’t seem to have changed. Is it possible I’m not getting the current version of Foundation yet? This is the partial output of gulp bower:

        $ gulp bower
        [14:21:12] Using gulpfile /var/www/
        [14:21:12] Starting ‘bower’…
        [14:21:12] Using cwd: /var/www/
        [14:21:12] Using bower dir: ./bower_components
        [14:21:13] bower not-cached git://>=6.1
        [14:21:13] bower resolve git://>=6.1

        doesn’t look like 6.2?

        • Jeremy Englert

          Does your bower file look like this?

          An earlier version of JointsWP had a slight issue with the bower file that made it hard to update past 6.1.x.

          • titaniumbones

            No, I had an older version that also had a line about motion-ui, but I ocmmented it out, reran bower, and then checked the bower.json in vendor/foundation-sites (duh!) and saw it is version 6.2.0. The parentlink class appears but it doesn’t look like the magic that’s supposed to happen in findation.drilldown.js, is actually happening. The top-level entries get a “role” of tab, instead of “menu-item”, which they’re supposed to have. Not sure why this would be.

            You can see it in action here:

            Again, not sure what the problem is. Having some trouble with gulp foundation-js as well:

            $ gulp foundation-js [22:57:24]
            [22:57:32] Using gulpfile /var/www/
            [22:57:32] Starting ‘foundation-js’…

            throw er; // Unhandled ‘error’ event
            at new JS_Parse_Error (eval at (/var/www/, :1526:18)
            at js_error (eval at (/var/www/, :1534:11)
            at parse_error (eval at (/var/www/, :1647:9)
            at Object.next_token [as input] (eval at (/var/www/, :1911:9)
            at next (eval at (/var/www/, :2011:25)
            at subscripts (eval at (/var/www/, :2687:13)
            at subscripts (eval at (/var/www/, :2668:20)
            at subscripts (eval at (/var/www/, :2668:20)
            at expr_atom (eval at (/var/www/, :2544:20)
            at maybe_unary (eval at (/var/www/, :2708:19)

            not sure how to interpret that.

          • Jeremy Englert

            Grab the gulpfile.js and package.json from the newest version of JointsWP. That will fix the gulp issue. With 6.2, you need to include Babel.

        • Jeremy Englert

          Try just changing the items_wrap to:

          ‘items_wrap’ => ‘%3$s’,

          • titaniumbones

            That was it — works now! thx.

    • Bjarni Wark

      Looking at this very thing too. Still looking for the bit about how to activate it from the provided link.

      • Jeremy Englert

        Try just changing the items_wrap to:

        ‘items_wrap’ => ‘%3$s’,

        • Bjarni Wark

          That nailed it, thanks. Changed the file in assets/functions/menu.php line 28 in The Off Canvas Menu section with your code above.

  • Luca Bucci

    Hi, I have a problem. In a multi-level topbar menu if a top-level menu item is a link then it works, instead if item has children links don’t work.
    Could you help me, please?
    Thank you in advance.

    • Jeremy Englert

      Sorry for the slow reply @disqus_sHrRtGffQk:disqus! Are you using the accordion menu? if so, I don’t think it’s possible to have the parent link be “clickable” when child elements exist. However, that would be a great feature to have.

  • Micah Logsdon

    I’m staring to loosing my mind a bit… I can’t for the life of me figure out how to get the Off-Canvas menu to collapse when a menu item is clicked and that menu item is linked to an anchor lower on the page. No setting i have changed no script i have added has had an effect… and now i’m just confused and sad. HELP!

    • Jeremy Englert

      Looks like a little bit of JS will do the trick.

      • Micah Logsdon

        Yeah, i’ve tried adding that script and to no effect.

        • Jeremy Englert

          What have you tried?

          I just made this and it worked:

          This function will close the off-canvas menu after the user scrolls 10px. I know this isn’t exactly what you’re looking for, but I just wanted to make sure that foundation(‘close’) worked.

          • Micah Logsdon

            I have no idea what i was doing wring but that did the trick! Thank you!

  • semwanga joshua

    My off-canvas menu i.e., the menu triggered by the data-toggle attribute, doesn’t show. How do I fix this? Also, I don’t see any menu in the top-bar for large screens. The top-bar shows very well but no WordPress menu neither pages show up. How do I set up my WordPress menu to show on the front-end in the way I’ve styled it? How would I style my Nav menu below:

    <img src="/assets/images/logo3.jpg” alt=”site-logo”>





    • Jeremy Englert

      Do you have a link I can check out?

      • semwanga joshua

        I’ve got it working. The problem was that I wasn’t having any active menu assigned in the admin dashboard appearances > menu section. Once i fixed that it worked. Thanks though for the concern.

  • Thomas Wilson

    Hi Jeremy,

    Working on a project using offcanvas menu.

    I’d like to move the Hamburger icon and off canvas display to the left side of the screen. What’s the best way to achieve this?

    Sorry if I missed it in the comments but i haven’t been able to spot.


    • Thomas Wilson

      Ah ha – figured this one out now

      If anyone else is wanting to know see content-offcanvas.php in parts


  • hassan

    hello jeremy i am facing issue on mobile browsers any help

  • Nate Fineberg

    How can I use the off canvas nav for both iPad portrait and Landscape views? I do not want to use the large screen nav for iPad, I have too many nav items. Thank you

  • Mkes99

    SO i tried setting my off canvas menu to data-drilldown with the parentLink option set to true and was unable to so the parent level nav when the first menu item was clicked. All you see is the back button and all the children of that menu item. Any help would be appreciated. Thanks

    • Mike Langone

      I have also not been able to get the parent menu item clickable, it appears this was fixed in foundation 6.2.3 any chance of jointswp being updated to the newest version?