Responsive Navigation

The responsive topbar uses Foundation 6 Responsive Navigation Patterns to make it easy to switch between accordion, dropdown and drilldown menus at different breakpoints.

To use this menu type, change the template part in header.php to:

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

Responsive Menu Options

In the assets/functions/menu.php file, locate the joints_top_nav() function. The two important lines of code are:

'menu_class' => 'vertical medium-horizontal menu',
'items_wrap' => '<ul id="%1$s" class="%2$s" data-responsive-menu="accordion medium-dropdown">%3$s</ul>',

Simply update the menu_class and items_wrap to match the navigation pattern you want. You also may need to adjust the class in assets/functions/menu.php depending on the type of menu you are creating.

  • Penny Badowska

    I have been trying to get a burger bar, with MENU (similar to the Foundation 5 version) on the small screen, but can’t get anything to appear. I have changed the header.php document as described. How do I implement the Tab Bar (which I have looked up on Foundation 6)? I can see how to edit ‘menu_class’ (I tried removing medium-horizontal, and duly got a vertical menu), which works on medium screen upwards, but don’t understand what to edit in ‘items-wrap’. Do I have to add any extra code to the nav.topbar file?

  • Penny Badowska

    It is now working! It was clashing with a plug-in, which seemed to add extra foundation code which over-wrote my code.

    Thank you for your fantastic theme, and sorry for being so slow about it!

  • designworksdan

    Hello, I was wondering what to do if I want to use a menu that I create via Appearance > Menus instead of the dynamically generated one based on pages created?

    • designworksdan

      Never mind. It does use that menu. ?

  • i2

    Alright, I tried going through searching the folders for the functions that create the menu, but I am at a loss.

    I want to change the tags to have the class of a “button” (like the styles in the Foundation kitchen sink page). Where in the world do I add this class to?

    • Jeremy Englert

      asssets/functions/ – there are a few menu related files in that directory. Are you just trying to add the class to one link or all of them?

      • i2

        Hi. Thanks for replying. (This might be more of a general wordpress question than a JointsWP question. I’m new to both.)

        I’m trying to add a class to each of the Menu Items individually. (I’m assuming %3$s are the menu items in the walkers.) The closest thing I found is “Adding Conditional Classes to Menu Items” on the WP documentation. (Modifying the function to my needs is not working…)

  • Marvin Sohiong

    @jeremyenglert:disqus the sticky off-canvas is working perfectly but i couldn’t make the topbar collapse like this feature here do you have plans for this to jointswp as this is part of foundation 6 framework?

    • Jeremy Englert

      Are you talking about how the topbar gets smaller when you scroll?

      • Marvin Sohiong


        • Jeremy Englert

          It’s actually not a part of F6 – it looks custom. But you should be able to steal the code from that pen. The JS should work as is. Then add the “.shrink” class and styles to your Sass/CSS files.

          Essentially, the JS adds the “shrink” class to the menu when you start to scroll.

          • Marvin Sohiong

            Ok, thanks…

  • Rboz


    I’ve used this for a vertical menu in a small website. It works perfectly but one thing. When the main menu-item has a submenu, it isn’t possible to click and open the url. The only thing that happens is the submenu appears. How can I make the main menu-item clickable for opening the page?

    • Jeremy Englert

      I don’t think this is possible with the accordion menu. It may be worth opening a topic on the Foundation forums to see what they suggest.

  • Josh Davis

    How can I set the navigation to always be sticky? When viewing on a mobile device, I’d like the top nav to still be sticky rather than anchored.

  • Drai

    Where do I look to make the sub menu horizontal. The class in the sub nav UL is “first-sub vertical” and I can’t figure out where that is getting set?

    • Jeremy Englert

      It’s set in the menu-walker.

  • Matt F

    Is it possible to remove the “back” navigation button in a drop down menu for mobile? As of now the “Back” part at the top takes up too much space.

  • Lindsay

    Okay, the dropdown portion of the menu is not working. Any suggestions?

    • mrjonnywood

      Can you share your code?

  • mrjonnywood

    Hi, I’m trying to add a fade in/out to the top-bar using Motion-UI. Unfortunately the default behaviour of `display:none` being attributed to `top-bar` when clicking `menu-icon` is interfering with the animation.

    How can I disable the default functionality?

    My code can be found here:
    It doesn’t compile in Codepen, just couldn’t post it here.

  • Javier Vergara Azócar

    Hi, is it possible to use custom navigation menus with the joints_wp_nav() function?? I was using wp_nav_menu( $args) so i could give it the theme location. Is there a way to do that with joints_wp_nav()??

  • Bjarni Wark

    I seem to be doing something wrong when trying to change the menu system from the default setting for mobile of the off-canvas to a drilldown menu.

    I replaced line 53 from the header.php file to:
    ?php get_template_part( ‘parts/nav’, ‘topbar’ ); ?

    Then modified assets/functions/menu.php with:
    ‘menu_class’ => ‘dropdown vertical medium-horizontal menu’,
    ‘items_wrap’ => ‘%3$s’,

    This makes the menu appear expanded on mobile sized screens but no longer has the MENU tab which hides the menu items. The drilldown feature works but the menu (all top level menu items) is shown to start with.

    Any suggestions to what I am missing?