Off-Canvas Top Bar

This is a combination of the Off-Canvas and Responsive Top Bar menus. On small screens, an off-canvas menu will be used; on medium and larger screens, the responsive navigation patterns will be utilized. To use this menu type, change the template part in header.php to:

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

Off-Canvas Top Bar Settings

By default, an off-canvas menu will be triggered on small screens. This can be adjusted in the parts/nav-offcanvas-topbar.php file.

View Off-Canvas Top Bar Demo

  • Marvin Sohiong

    Hi, any idea why the menu goes below the title when in mobile? I’m using offcanvas-topbar…

    • Jeremy Englert

      I’ll get this fixed.

      In the meantime, try adding float-left and float-right classes – like seen here:

      • Marvin Sohiong

        Ok, thanks…

      • Marvin Sohiong

        I’m using the latest jointswp so i’m aleady using the code you provided but still not fix.

      • Carlos E Silva

        Somewhere in the code you have set .top-bar-left and .top-bar-right to have { width: 100%;} for mobile.
        A quick fix for now is to override their widths to auto in your own css, until Jeremy releases a hotfix.

      • Carlos E Silva

        It turns out this is no bug, this is the expected behavior of the top bar

        “A top bar (.top-bar) can have two sections: a left-hand section (.top-bar-left) and a right-hand section (.top-bar-right). On small screens, these sections stack on top of each other.”

        • Jeremy Englert

          Thanks for finding that @disqus_eANMawFZ1J:disqus!

        • kemie

          In case someone wants to override this, the place to look is /vendor/foundation-sites/scss/components/_top-bar.scss, lines 53 and 57

          • Marvin Sohiong


        • Marvin Sohiong

          @media screen and (min-width: 0em) and (max-width: 39.9375em) {
          .top-bar-right {
          width: 100%; }
          .top-bar-left {
          width: 100%; } }

          Just found out commenting it in style.css works

    • varma

      Actually you can add .top-bar-left, .top-bar-right {width: auto;} and it will probably fix the top bar issue 🙂

  • Robert James

    Hi i am just starting out with joint, have used both foundation and WP a little. Ive downloaded the CSS version. Im trying to use to off-canvas and responsive top bar. When i change the get_template_part, i just get a copy of the top bar / nav area and the off canvas doesnt open when clicked. Thanks

    • Jeremy Englert

      This should be the default navigation. You shouldn’t need to change anything.

      Did you change the template part on Line #53?

      It can be confusing because there is another template part that is similar earlier in the file.

  • Marvin Sohiong

    When i click the menu offcanvas-topbar then scroll down a little there is a gap, i think the { left: -250px; } is causing? I’ve tried editing but i don’t know where to find that? Any idea? Please see attached image, thanks…

    • Jeremy Englert

      “” means the styling is coming from inline-styling – most likely from injected JavaScript so it will be difficult to override.

      I can’t seem to replicate this on the demo site:

      • Marvin Sohiong

        Forgot to mention that my menu is sticky, try sticky your menu.

      • Marvin Sohiong

        Hmnn, i think this is just minor…

  • Luca Bucci

    Hi, the children items don’t work also with this type of menu …. 🙁

    • Jeremy Englert

      What do you mean? They appear to be working in the demo above.

      • Luca Bucci

        Sorry Jeremy, I know, but unfortunately in my site children items work only in offcanvas version.
        Could you help me?
        Thanks a lot.

        • Jeremy Englert

          Do you have a link?

          • Luca Bucci

            No, because i’m working off-line, but i can tell you that i’m using the original version of file:

            <img src="”>

            <!– –>


  • B Rex Stewart

    Hi, Jeremy…Thanks for WP Joints…Love it!! However, I notice a slight jog to the right with the main nav menu in the demo on click. Extremely evident when you re-click an item. Almost like FOUC. On the sites I’m developing it has moved it’s way into the entire body of the site. Using latest of Chrome. Hopefully you can address this?

    • Jeremy Englert

      I’m not able to replicate this. I see a slight “flash” when the arrows are loaded, but that’s only on the page load – not a click. Can you send me a short screencast/gif of the issue?

      • B Rex Stewart

        Please see attached…this is of the demo.

      • B Rex Stewart

        Any ideas as to the FOUC that creeps into the sidebar as well?

  • Lee Honeycutt

    Jeremy, quick question: how do you change the orientation of arrows in dropdown menus. I know that _dropdown.scss has three different settings using &.is-xxx-arrow > a::after, but I cannot find where to manipulate this variable. Thanks.

    • Jeremy Englert

      This should work: > > a::after { transform: rotate(-90deg);}

      • Lee Honeycutt

        Thanks, Jeremy. It would actually be (90deg), but this is more efficient than what I was doing. BTW, shouldn’t the arrow be pointing down (as shown) as the default?

  • Ryan Patterson

    Hi Jeremy,

    I’m having an issue with the nav-offcanvas-topbar and didn’t know if you had run into this before. I have one nav item with child pages (dropdown submenu). When the page first loads I can click on the top level link (parent). However, after about 30 seconds to a minute of sitting idle, when I try to click on the top level link, it does not take me anywhere. When this happens, I get the following console error:

    Uncaught TypeError: e.toggle is not a function(anonymous function)
    @ foundation.min.js?ver=6.0:1m.event.dispatch
    @ jquery.js?ver=1.11.3:4r.handle
    @ jquery.js?ver=1.11.3:4

    At first I thought it might be a conflict with another plugin, but I have gone as far as disabling all plugins and still happens.

    Let me know if you need a link to the development site I’m working on.

    Any thoughts?



    • Jeremy Englert

      Do you have a link I can checkout? I can’t replicate this on the demo site.

      Also, does it happen in all browsers or just a specific one?

      Big thanks!

  • Thomas Wilson

    Hey Jeremy,

    Loving the latest version of Joints

    I have the following

    I’m using the accordion menu for mobile nav and I’d like it to drop down vertically – which it was doing in development – but it now is doing a weird horizontal expansion

    Could you please advise on how to get it to dropping down vertically?

    Many thanks

    • Jeremy Englert
      • Thomas Wilson

        Thanks for the info

        I checked and this site didn’t have the menu-walkers.php file – Was it a recent addition? Will I need to be updating the theme? I had thought I was using the latest version, but perhaps I’ve made an error

        Another site which I started building at a similar time (i.e 2-3 months back) had the file

        I tried copying it over, but it doesn’t seem to work.

        • Jeremy Englert

          Sorry, this recently changed. The code is now found in assets/functions/menu.php.

          You need to make sure you have the ‘vertical’ class added to the walker.

          • Thomas Wilson

            Awesome – thanks Jeremy!

            Worked a treat, really like this feature and will look forward to using more

  • hassan

    Hello Jeremy I am using jointswp with foundation 6 and i update into foundation 6.2.1 but i am facing issue with off canvas nav on small devices its working fine with chrome opera mozilla safari on mobile but the problem is when you try to open off canvas in android default browser or in uc browser so its giving trouble then, on click off canvas does not appear can you help me Thanks

  • Fabian

    Hi Jeremy, in Safari 8.0.8 on Mac (release dec 2015) the Off Canvas Menu fails to open upon compiling of SCSS. See following link: – any idea of why this may be happening? Thanks for any help or advice in advance.

  • Bryony

    Hi, I’m having an issue with my menu – the nav items are mostly anchor points, and when the menu scales down to mobile and you click on a nav item which is an anchor point, it jumps to the anchor but the menu doesn’t close and therefore covers the content! If someone could help i’d be so grateful!

    Site is:

    Thank you

    • Bryony

      Hi, if someone could help it’d be much appreciated! Thank you

  • Mike Langone

    Hi I am having a weird bug with the menu specifically on mobile ios devices. The off canvas seems to jump up and down on its own.
    Steps to replicate the issue using an IOS device currently tested with iphone6 and iphone se
    Go to
    Select menu
    Dropdown for our products then Order products. Click Gourmet butters for example.
    Now here is the interesting buggy part: Click the back arrow <- by the url bar
    Click Order products again to close the sub-menu then open the sub-menu again by clicking order products.
    The submenu will bounce up and down infinitely

    I feel like there is something in regards to the back arrow.

    Any help would be great.

    • Mike Langone

      I have setup a fresh install of the latest jointsWP and have been able to replicate this on ios devices consistently so this is a real thing. You can try this on any fresh install of jointsWP and wordpress.
      Menu structure as follows
      Custom link
      —-Custom link 2
      ——-Standard page
      ——-Standard page

      Using ios device drill down to standard page, when that page loads click back arrow browser, then double click the custom link2 once to close and once to open. Watch it bounce forever 🙂

      I have found a workaround here and I have it implemented on one of my sites:

      I use jointsWP as a framework for several clients and hope that this issue can be resolved soon. Please let me know if you need any additional information.

  • Petr Jandák

    Hi, this is my situation: I’m on the submenu page (eg. Products -> Product 1) on a mobile device. When I open the offcanvas menu I need to have the parent menu (Products) opened to see all the submenu items (with the active one seelected).

    How do I achieve this? At this moment the accordion menu is closed and I have to open it manually to see the submenu (which is displayed correctly).

    Many thanks.