3

I'm building a responsive navigation with foundation 6, integrated in wordpress. I'd like to use data-responsive-menu attribute in order to trigger the drilldown plugin on small screens. Easy. The problem is that I don't want any of the other plugins on the other screen sizes. The documentation gives this example: 

<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown">

But this trigger drilldown plugin on small screens and dropdown on bigger ones. If I use only "drilldown" options, or "small-drilldown", it targets all media queries. I know that I could call two instances of wp_nav_menu, with show-for-small-only and show-for-medium-up, but I wonder if I can achieve this without printing two equal menus.

general03
  • 855
  • 1
  • 10
  • 33
Marco
  • 712
  • 1
  • 10
  • 23
  • Are you saying the menu should be a [Nested Menu](http://foundation.zurb.com/sites/docs/menu.html#nested-style) on screen sizes medium and up? – Colin Marshall Jan 28 '16 at 20:16
  • No, I'd like an "horizontal" style, like an ul.menu on screen size medium and up. I apologyze, maybe it wasn't clear! – Marco Jan 28 '16 at 20:26
  • Dropdown is actually what you want for medium up then, you just have to set it as horizontal. Adding an answer for you now... – Colin Marshall Jan 28 '16 at 20:40

1 Answers1

4

You just need to add the responsive class that tells the menu to be horizontal from medium and up, like so:

<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">

Update: The bugs related to the dropdown arrows and submenu fold out direction in the responsive menu have been fixed in the release of foundation-sites 6.2.0.

Colin Marshall
  • 2,142
  • 2
  • 21
  • 31
  • Your solution is working, thank you for the answer. The point is that I don't want "dropdown" behaviour. With this code, all submenu items behave like foundation 6 dropdown, but I personally build a custom view for them, in medium up media queries. I thought it was possible not to choose any plugin and have a simple menu like this http://foundation.zurb.com/sites/docs/menu.html Anyway, thank you very much for your help! – Marco Jan 28 '16 at 21:09
  • You're welcome. How do you want the submenu items to appear on medium up if they don't dropdown? Just have every menu item on the same horizontal line? – Colin Marshall Jan 28 '16 at 21:13
  • Exactly, because I needed to build my own giant menu for accomplish customer's request. In other words, I need foundation's help only on mobile. For now, I had written 2 menus call, one for mobile and one for larger screens. Need to go, I'll read next answers tomorrow, have a nice night mate. – Marco Jan 28 '16 at 21:22
  • The 2 menu calls is probably the way to go for what you want, but if you can use CSS to "undo" the dropdowns on larger screens then go for that. – Colin Marshall Jan 28 '16 at 21:26
  • Yeah, that's probably the best solution! – Marco Jan 28 '16 at 23:56
  • I also want drilldown for smaller screens and no dropdown on larger screens. I ended up removing the dropdown classes with jQuery. – Jacco van der Post Oct 03 '17 at 13:51