Menu icon Foundation
Use basic responsive drilldown menu not off canvas menu with jointswp

Ive been following along with the online documentation for adding a drillldown menu for jointswp & Foundation 6 here http://jointswp.com/docs/responsive-navigation/

 I have no need to use any of the off canvas settings and have deleted divs with class names as, .off-canvas-wrapper, . off-canvas-wrapper-inner and .off-canvas-content

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

and replaced it with:

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

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 or examples to what I may be missing?

I dont wish to use off-canvas style menu for mobile, any help appreciated.

jointswp

Ive been following along with the online documentation for adding a drillldown menu for jointswp & Foundation 6 here http://jointswp.com/docs/responsive-navigation/

 I have no need to use any of the off canvas settings and have deleted divs with class names as, .off-canvas-wrapper, . off-canvas-wrapper-inner and .off-canvas-content

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

and replaced it with:

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

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 or examples to what I may be missing?

I dont wish to use off-canvas style menu for mobile, any help appreciated.

Rafi Benkual over 3 years ago

To generate the mobile menu you can use the title bar. You'll want the id of your menu to match the id of the title bar:

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

 

Bjarni Wark over 3 years ago

Okay, thanks for that will read on more on how I might get this working with jointswp menu / mobile.