Search code examples
responsive-designzurb-foundationdrilldownzurb-foundation-6

Foundation 6 data-responsive-menu parameters


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.


Solution

  • 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.