Menu icon Foundation
Responsive Navigation does not collapse properly on mobile

Hey there, I am thinking of doing my next project in F6, but in looking at the F6 Responsive Navigation demo (http://foundation.zurb.com/sites/docs/responsive-navigation.html), it seems that the responsive toggle menu does not collapse properly into a vertical stack like it should on mobile. Screenshot attached.

I hope this is just a bug or my error, and not how they are intending it to function... because this seems rather pointless as a nav menu otherwise. I don't want to have to custom-code my own styles/behavior, the whole point of using this framework was to save time!

This issue alone is currently stopping me from upgrading from 5 to 6. So I really could use some help.
Am I just looking at this wrong?

Screenshot foundation.zurb.com 2015 12 30 17 54 42

foundation 6responsive navigation

Hey there, I am thinking of doing my next project in F6, but in looking at the F6 Responsive Navigation demo (http://foundation.zurb.com/sites/docs/responsive-navigation.html), it seems that the responsive toggle menu does not collapse properly into a vertical stack like it should on mobile. Screenshot attached.

I hope this is just a bug or my error, and not how they are intending it to function... because this seems rather pointless as a nav menu otherwise. I don't want to have to custom-code my own styles/behavior, the whole point of using this framework was to save time!

This issue alone is currently stopping me from upgrading from 5 to 6. So I really could use some help.
Am I just looking at this wrong?

Screenshot foundation.zurb.com 2015 12 30 17 54 42
Brian Tan over 3 years ago

This is what responsive menu is for. Add "vertical medium-horizontal" class to your dropdown/menu.

  <div class="top-bar-left">
    <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>

The only small "bug" I see is dropdown menu change the arrow to right pointing regardless.

Barbara Schendel over 3 years ago

Hi Brian, thank you for replying. This code does change it a bit but on mobile the drilldown behavior is still broken. See screenshot here https://nimbus.everhelper.me/client/notes/share/363424/BiN0ietCC3lFTzNi7L4TWJXF79OJNLqr/
This is on small screen after clicking "One". Seems like the non-JS fallback, is not moving to the side as the drilldown should.

Is there a new javascript I should be including somewhere?
Here is the code I am using:

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

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="vertical dropdown menu medium-horizontal" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

Barbara Schendel over 3 years ago

Also, here is what the above code looks like on the medium view (again after clicking "One" to reveal sub-menu) --
https://nimbus.everhelper.me/client/notes/share/363429/BVwghrQvc6PxTOmddcLo7PVocIxbsGXK/

Barbara Schendel over 3 years ago

Here are the scripts I'm currently including (generated using Yeti "basic template" install)

<script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="js/app.js"></script>

Brian Tan over 3 years ago

Yes, I've already log an issue in github on the vertical medium-horizontal drop down arrow orientation.

You can try drilldown instead of dropdown menu to see if it is what you desire.

A more complex route is to define 2 separate menu structures for medium and small (hamburger), using visibility calsses to control display. http://foundation.zurb.com/sites/docs/visibility.html

Barbara Schendel over 3 years ago

Thank you I am glad to know I am not crazy. Thank you also for reporting it to them.

I also tried the drilldown, again using the exact code they provide -- it is supposed to show as a horizontal menu on medium and drilldown on small -- but this also does not work. 1) it displays as a drilldown on all screen sizes, not just on small, and 2) the drilldown functionalty again does not work properly, see screenshot here https://nimbus.everhelper.me/client/notes/share/363486/QCgR3ogCBU9WOC8N35yBNWU1P6mRH1Ou/

The code used to create this menu was lifted directly from the F6 code demo, and is as follows:

<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
  <li class="has-submenu">
    <a href="#">Item 1</a>
    <ul class="vertical submenu menu" data-submenu id="m2">
      <li class="has-submenu">
        <a href="#">Item 1A</a>
        <ul class="vertical submenu menu" data-submenu id="m3">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 2</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 3</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

Thank you again for your help!