Menu icon Foundation
Submenu problems on mobile

Officially this is now a bug and I think a big one because even ZURB's documentation has it. Take a look and if you had same problem how did you solve it? I ask because submenu items are now useless on mobile
https://github.com/zurb/foundation-sites/issues/8298

menubugmobile

Officially this is now a bug and I think a big one because even ZURB's documentation has it. Take a look and if you had same problem how did you solve it? I ask because submenu items are now useless on mobile
https://github.com/zurb/foundation-sites/issues/8298

Magda Jans almost 4 years ago

Nah!

In your case, with a centered navigation on a mobile, a nested navigation would be more plausible, I think. But that is not possible with the F6 responsive menu - or is it? (In fact it would me more natural to have that option sooner than a dropdown). But you can have that nested menu in an off-canvas. Here is an example for that kind of off-canvas - have a look at the source code. (The horizontal menu is a variant reshaped with CSS).

http://www.lux-petri.de/en

Vladimir almost 4 years ago

@Magda Jans that is correct what you said but if specs received from client demands that kind of menu...
Take a look if you have time on mobile (use inspector if you want, it is the same...) http://zlajo.webfactional.com/

But, unless nothing pops up in next few days I will have to adopt your solution, accordion like menu for mobile.

Magda Jans almost 4 years ago

You asked: "Has anyone a solution for that?" If you don't want to tinker then you must accept it as a bug and look for an alternative within Foundation itself. There is the solution - or not... :-)

Magda Jans almost 4 years ago

PS.: It's a question of taste, but I don't really understand why you want to use a dropdown menu for mobile phones. The dropdown menu is okay for tablets and larger, but not very elegant for mobiles, imho. Instead you could make a responsive menu, that is displayed as accordion on mobiles. Like that one:

<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown" style="width: 300px;">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu">
      <li>
        <a href="#">Item 1A</a>
        <ul class="vertical menu">
          <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>
    <a href="#">Item 2</a>
    <ul class="vertical menu">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Item 3</a>
    <ul class="vertical menu">
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

Vladimir almost 4 years ago

@Magda Jans it is not a problem to tinker with code a bit but what will happen when lets say 6.3 or higher get released and you update your project and suddenly you found that everything is broken, that you need to tinker with whole project again. And again.
I am rapidly loosing my patience here and as I can see I am not the only one. And to make it worst, not a single word from Zurb development team.

Magda Jans almost 4 years ago

You are right, @Vladimir, same for me, with 6.2. Btw: is the documentation built with 6.2? I am not sure.

Here just a short try: if you tinker a bit with this

.is-dropdown-submenu:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > .is-dropdown-submenu, .is-dropdown-submenu.js-dropdown-active {
    display: block;
    left: auto !important;
    right: 100% !important; }

you'll get the submenu back into the viewport again.

Vladimir almost 4 years ago

Almost a week and no one had this problem except me? Can anyone replicate this and does anyone have solution to this, because I can not launch project without working navigation on all devices.