Foundation 6 data-responsive-menu parameters

Question

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.

Are you saying the menu should be a Nested Menu on screen sizes medium and up? — Colin Marshall
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
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

Colin Marshall Colin Marshall · Accepted Answer · 2016-01-28T20:44:04

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.

Foundation 6 data-responsive-menu parameters

1 Answers