I think I figured out why the flexibilty menu isn't functioning on an iPad or mobile phone using a touch screen.
This is the menu call for mobile devices:
<nav id="main_nav" class="mobile_nav show-for-small">
[[!Wayfinder? &startId=`0` &rowTpl=`rowTpl` &innerTpl=`innerTpl` &outerTpl=`outerTpl` &outerClass=`nav-bar` &innerClass=`flyout,` &parentClass=`has-flyout`]]
</nav>
This results in:
<nav id="main_nav" class="mobile_nav show-for-small">
<ul class="nav-bar"><!-- rowTpl -->
<li class="first active">
<a href="http://www.ceciliahandel.nl/" title="Home" >Home</a>
</li>
<!-- rowTpl -->
<li class="has-flyout">
<a href="leden-pagina/" title="Leden pagina" >Leden pagina</a>
<!-- innerTpl -->
<ul class="sublist flyout,">
<!-- rowTpl -->
<li class="first">
<a href="leden-pagina/agenda.html" title="Agenda" >Agenda</a>
</li>
</ul>
</li>
<!-- rowTpl -->
<li class="has-flyout">
<a href="over-ons/" title="Over ons" >Over ons</a>
<!-- innerTpl -->
<ul class="sublist flyout,">
<!-- rowTpl -->
<li class="first">
<a href="over-ons/fanfare.html" title="Fanfare" >Fanfare</a>
</li>
<!-- rowTpl -->
<li class="">
<a href="over-ons/slagwerkgroep.html" title="Slagwerkgroep" >Slagwerkgroep</a>
</li>
<!-- rowTpl -->
<li class="">
<a href="over-ons/musicool.html" title="Musicool" >Musicool</a>
</li>
<!-- rowTpl -->
<li class="last">
<a href="over-ons/bestuur.html" title="Bestuur" >Het bestuur en commissies.</a>
</li>
</ul>
</li>
</nav>
In the documentation from Zurb Foundation navigation there is this example code for the same menu:
<!-- Entire Navbar Code -->
<ul class="nav-bar">
<li class="active"><a href="#">Nav Item 1</a></li>
<li class="has-flyout">
<a href="#">Nav Item 2</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<ul class="flyout">
<li><a href="#">Sub Nav Item 1</a></li>
<li><a href="#">Sub Nav Item 2</a></li>
<li><a href="#">Sub Nav 3</a></li>
<li><a href="#">Sub Nav 4</a></li>
<li><a href="#">Sub Nav Item 5</a></li>
</ul>
</li>
<li class="has-flyout">
<a href="#">Nav Item 3</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<div class="flyout">
<h5>Regular Dropdown</h5>
<div class="row">
<div class="six columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
<div class="six columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
</div>
</div>
</li>
<li class="has-flyout">
<a href="#">Nav Item 4</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<div class="flyout large right">
<h5>Large Dropdown</h5>
<div class="row">
<div class="four columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
<div class="four columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
<div class="four columns">
<img src="http://placehold.it/200x250" />
</div>
</div>
</div>
</li>
</ul>
<!-- Dropdown Lists for Navbar -->
<li class="has-flyout">
<a href="#">Nav Item 2</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<ul class="flyout">
<li><a href="#">Sub Nav Item 1</a></li>
<li><a href="#">Sub Nav Item 2</a></li>
<li><a href="#">Sub Nav 3</a></li>
<li><a href="#">Sub Nav 4</a></li>
<li><a href="#">Sub Nav Item 5</a></li>
</ul>
</li>
<!-- Arbitrary Content Dropdowns for Navbar -->
<li class="has-flyout">
<a href="#">Nav Item 3</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<div class="flyout [small, large]">
<h5>Regular Dropdown</h5>
<div class="row">
<div class="six columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
<div class="six columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
</div>
</div>
</li>
What is missing in Flexibility is this part:
<a href="#" class="flyout-toggle"><span> </span></a>
I think it has to be in the parentClass or otherwise the innerClass, how can I put the flyout-toggle there?
☆ A M B ☆
☆ A M B ☆