Menu icon Foundation
foundation 6 menu not working on Ipad

0 down vote favorite

 
 

I am trying to create a foundation 6 site with a fairly large menu, I have created a codepen of the exact menu here:

https://codepen.io/ianims/pen/WOWazM

The Code is as shown:

<body>

<div class="top-bar ">

        <div> 
            <div  class="header_logo">
                <a href="index.php">
                    <div  class="header_logo_first">Yacht Charters</div>
                </a>
                <div  class="header_logo_text">Yacht Management and Charter</div>
            </div>    
        </div>


        <div class="top-bar-right">
            <div class="contact_details">
                    <div class="contact_left"><img src="././images/my_account.png"  ><a href="my_account.php" class="follow">MY ACCOUNT</a></div>
                    <div class="contact_left"><img src="././images/phone.png">+44 207 112233</div>
                    <div class="contact_right"><img src="././images/mail.png"><a href="mailto:me@somewhere.com" style="color:#ffffff;" target="_top">me@somewhere.com</a></div>
            </div>
        </div>



</div>



<div class="top-bar ">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="large">
  <button class="menu-icon" type="button" data-toggle="example-menu"></button>
  <div class="title-bar-title">Menu</div>
</div>


<!-- <ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown"  style="background:#000000;"  id="example-menu"> -->
<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion dropdown"  style="background:#000000;"  id="example-menu">    
    <li>
    <!-- INTRO -->
    <a href="#" class="menu_text_size">Introduction</a>
    <ul class="vertical menu"  style="background:#000000;">
                <li><a href="#">Introduction</a></li>
                <li><a href="about_diyachting.php">The DiYachting Team</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="about_partners.php">Corporate Partners</a></li>
    </ul>
  </li>

  <li>
    <!-- CHARTER -->
    <a href="#" class="menu_text_size">Charter</a>
    <ul class="vertical menu"  style="background:#000000;">
            <li><a href="#">Introduction</a></li>
            <li><a href="charter_diyacht.php">Our Yachts</a></li>
            <li><a href="charter_destinations.php">Destinations</a></li>
            <li><a href="#">FAQs</a></li>
    </ul>
  </li>

    <li>
       <!-- MANAGEMENT -->
       <a href="#" class="menu_text_size">Management</a>
       <ul class="vertical menu"  style="background:#000000;">
               <li><a href="management_intro.php">Introduction</a></li>
               <li><a href="management_yacht.php">Yacht Management</a></li>
               <li><a href="management_consultancy.php">Consultancy</a></li>
               <li><a href="management_logistics.php">Logistics</a></li>
               <li><a href="management_financial.php">Financial</a></li>
               <li><a href="compliance_intro.php">Compliance</a></li>
               <li><a href="management_technical.php">Technical</a></li>
               <li><a href="crew_services_intro.php">Crew</a></li>
               <li><a href="charter_management.php">Charter Management</a></li>
               <li><a href="management_resources.php">Resources</a></li>
       </ul>
     </li>

    <li>
       <!-- PURCHASE -->
       <a href="#"  class="menu_text_size">Purchase</a>
       <ul class="vertical menu"  style="background:#000000;">
               <li><a href="purchase.php">PURCHASE</a></li>
       </ul>
    </li>

    <li>
       <!-- REGISTRATION -->
       <a href="#" class="menu_text_size">Registration</a>
       <ul class="vertical menu"  style="background:#000000;">
               <li><a href="registration_intro.php">Introduction</a></li>
               <li><a href="#">British and Jersey Registration</a></li>
               <li><a href="#">Tonnage Surveys</a></li>
               <li><a href="#">Uk Reprasentative</a></li>
      </ul>
     </li>

    <li>
       <!-- COMPLIANCE -->
       <a href="#"  class="menu_text_size">Compliance</a>
       <ul class="vertical menu"  style="background:#000000;">
                <li><a href="#">Introduction</a></li>
                <li><a href="compliance_intro.php">MCA Coding</a></li>
                <li><a href="compliance_mlc.php">MLC Compliance</a></li>
                <li><a href="#">Equipment, Supply and Install</a></li>                                                 
                <li><a href="#">Renewal Inspections & Equipment Service</a></li>                                                 
                <li><a href="#">MCA Surveys Worldwide</a></li>
      </ul>
     </li>

    <li>
       <!-- TECHNICAL -->
       <a href="#" class="menu_text_size">Technical</a>
       <ul class="vertical menu"  style="background:#000000;">
            <li><a href="management_technical.php">Introduction</a></li>
            <li><a href="#">Maintenance</a></li>
            <li><a href="#">Spare Parts</a></li>
            <li><a href="#">Wintervention</a></li>
            <li><a href="#">Summer Service</a></li>
            <li><a href="#">Haul Out Management</a></li>
            <li><a href="#">Refits</a></li>
            <li><a href="#">Equipment</a></li>
      </ul>
     </li>

    <li>
       <!-- CREW -->
       <a href="#"  class="menu_text_size">Crew</a>
       <ul class="vertical menu"  style="background:#000000;">
            <li><a href="crew_services_intro.php">Introduction</a></li>
            <li><a href="crew_recruitment.php">Recruitment</a></li>
            <li><a href="crew_employment.php">Employment</a></li>
            <li><a href="#">Temporary / Short Term Crew</a></li>
            <li><a href="#">Vacancies and Apply</a></li>       
      </ul>
     </li>

     <!-- NEWS -->
     <li>
       <a href="#" class="menu_text_size">News</a>
       <ul class="vertical menu"  style="background:#000000;">
            <li><a href="news.php">News</a></li>                                            
            <li><a href="#">DiYachting Press</a></li>
            <li><a href="news_events.php">Upcoming Events</a></li>
       </ul>
    </li>


         <!-- PRESS -->
     <li>
       <a href="#"  class="menu_text_size">Press</a>
       <ul class="vertical menu"  style="background:#000000;">
            <li><a href="#">Press Pack</a></li>
            <li><a href="#">In The Press</a></li>
            <li><a href="news_events.php">Meet Us</a></li>
            <li><a href="#">Contact</a></li>
       </ul>
    </li>
</ul>
</div>

The menu works fine on larger screens laptop, desktop and also small screens , but on a IPad the menu is off the screen to the right -- any ideas??

menuipad

0 down vote favorite

 
 

I am trying to create a foundation 6 site with a fairly large menu, I have created a codepen of the exact menu here:

https://codepen.io/ianims/pen/WOWazM

The Code is as shown:

<body>

<div class="top-bar ">

        <div> 
            <div  class="header_logo">
                <a href="index.php">
                    <div  class="header_logo_first">Yacht Charters</div>
                </a>
                <div  class="header_logo_text">Yacht Management and Charter</div>
            </div>    
        </div>


        <div class="top-bar-right">
            <div class="contact_details">
                    <div class="contact_left"><img src="././images/my_account.png"  ><a href="my_account.php" class="follow">MY ACCOUNT</a></div>
                    <div class="contact_left"><img src="././images/phone.png">+44 207 112233</div>
                    <div class="contact_right"><img src="././images/mail.png"><a href="mailto:me@somewhere.com" style="color:#ffffff;" target="_top">me@somewhere.com</a></div>
            </div>
        </div>



</div>



<div class="top-bar ">
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="large">
  <button class="menu-icon" type="button" data-toggle="example-menu"></button>
  <div class="title-bar-title">Menu</div>
</div>


<!-- <ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown"  style="background:#000000;"  id="example-menu"> -->
<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion dropdown"  style="background:#000000;"  id="example-menu">    
    <li>
    <!-- INTRO -->
    <a href="#" class="menu_text_size">Introduction</a>
    <ul class="vertical menu"  style="background:#000000;">
                <li><a href="#">Introduction</a></li>
                <li><a href="about_diyachting.php">The DiYachting Team</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="about_partners.php">Corporate Partners</a></li>
    </ul>
  </li>

  <li>
    <!-- CHARTER -->
    <a href="#" class="menu_text_size">Charter</a>
    <ul class="vertical menu"  style="background:#000000;">
            <li><a href="#">Introduction</a></li>
            <li><a href="charter_diyacht.php">Our Yachts</a></li>
            <li><a href="charter_destinations.php">Destinations</a></li>
            <li><a href="#">FAQs</a></li>
    </ul>
  </li>

    <li>
       <!-- MANAGEMENT -->
       <a href="#" class="menu_text_size">Management</a>
       <ul class="vertical menu"  style="background:#000000;">
               <li><a href="management_intro.php">Introduction</a></li>
               <li><a href="management_yacht.php">Yacht Management</a></li>
               <li><a href="management_consultancy.php">Consultancy</a></li>
               <li><a href="management_logistics.php">Logistics</a></li>
               <li><a href="management_financial.php">Financial</a></li>
               <li><a href="compliance_intro.php">Compliance</a></li>
               <li><a href="management_technical.php">Technical</a></li>
               <li><a href="crew_services_intro.php">Crew</a></li>
               <li><a href="charter_management.php">Charter Management</a></li>
               <li><a href="management_resources.php">Resources</a></li>
       </ul>
     </li>

    <li>
       <!-- PURCHASE -->
       <a href="#"  class="menu_text_size">Purchase</a>
       <ul class="vertical menu"  style="background:#000000;">
               <li><a href="purchase.php">PURCHASE</a></li>
       </ul>
    </li>

    <li>
       <!-- REGISTRATION -->
       <a href="#" class="menu_text_size">Registration</a>
       <ul class="vertical menu"  style="background:#000000;">
               <li><a href="registration_intro.php">Introduction</a></li>
               <li><a href="#">British and Jersey Registration</a></li>
               <li><a href="#">Tonnage Surveys</a></li>
               <li><a href="#">Uk Reprasentative</a></li>
      </ul>
     </li>

    <li>
       <!-- COMPLIANCE -->
       <a href="#"  class="menu_text_size">Compliance</a>
       <ul class="vertical menu"  style="background:#000000;">
                <li><a href="#">Introduction</a></li>
                <li><a href="compliance_intro.php">MCA Coding</a></li>
                <li><a href="compliance_mlc.php">MLC Compliance</a></li>
                <li><a href="#">Equipment, Supply and Install</a></li>                                                 
                <li><a href="#">Renewal Inspections & Equipment Service</a></li>                                                 
                <li><a href="#">MCA Surveys Worldwide</a></li>
      </ul>
     </li>

    <li>
       <!-- TECHNICAL -->
       <a href="#" class="menu_text_size">Technical</a>
       <ul class="vertical menu"  style="background:#000000;">
            <li><a href="management_technical.php">Introduction</a></li>
            <li><a href="#">Maintenance</a></li>
            <li><a href="#">Spare Parts</a></li>
            <li><a href="#">Wintervention</a></li>
            <li><a href="#">Summer Service</a></li>
            <li><a href="#">Haul Out Management</a></li>
            <li><a href="#">Refits</a></li>
            <li><a href="#">Equipment</a></li>
      </ul>
     </li>

    <li>
       <!-- CREW -->
       <a href="#"  class="menu_text_size">Crew</a>
       <ul class="vertical menu"  style="background:#000000;">
            <li><a href="crew_services_intro.php">Introduction</a></li>
            <li><a href="crew_recruitment.php">Recruitment</a></li>
            <li><a href="crew_employment.php">Employment</a></li>
            <li><a href="#">Temporary / Short Term Crew</a></li>
            <li><a href="#">Vacancies and Apply</a></li>       
      </ul>
     </li>

     <!-- NEWS -->
     <li>
       <a href="#" class="menu_text_size">News</a>
       <ul class="vertical menu"  style="background:#000000;">
            <li><a href="news.php">News</a></li>                                            
            <li><a href="#">DiYachting Press</a></li>
            <li><a href="news_events.php">Upcoming Events</a></li>
       </ul>
    </li>


         <!-- PRESS -->
     <li>
       <a href="#"  class="menu_text_size">Press</a>
       <ul class="vertical menu"  style="background:#000000;">
            <li><a href="#">Press Pack</a></li>
            <li><a href="#">In The Press</a></li>
            <li><a href="news_events.php">Meet Us</a></li>
            <li><a href="#">Contact</a></li>
       </ul>
    </li>
</ul>
</div>

The menu works fine on larger screens laptop, desktop and also small screens , but on a IPad the menu is off the screen to the right -- any ideas??

Rafi Benkual over 1 year ago

What version of Foundation is this codpen example or are you using? It seems to work on 6.4.1

Ian Sherman over 1 year ago

Hi Rafi

Thanks for the comment.

I was using the following:

https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js

 

After you tip I downloaded the latest Foundation and plugged it in and it seems good now.Thanks

Park Prince 5 months ago

Seems not working on my iPad 2 that is running iOS 10.0.1, is iPad 2 no longer supported or is it because the iOS version is too old? I don't have the problem with other iPad generations running iOS 11.0 or above.