Anant Anant - 28 days ago 18
Javascript Question

Mobile menu is not opening in iphone 4-5-6

This is my website:-

http://www.epcgroup.net/ecp_stage/

I have applied a mobile navigation menu here (mobile-navigation.js)

Problem is the menu is not working in Iphone4-5-6

It's working on Android devices.

Code:-



$(document).ready(function(){universal();});

Mobile-navigation.php:-

<nav id="menu-mobile" style="display:none;">

<ul>
<li><a href="ecp_stage">Home</a></li>
<li><a href="services-and-solutions"> <span class="flaticon-search15"></span> Services & Solutions</a>
<ul>
<li><a href="office-365">Office 365 Consulting</a></li>
<li><a href="ecm-rm">Content Management</a></li>
<li><a href="sharepoint-consulting">Sharepoint Consulting</a></li>
<li><a href="risk-compliance">Risk & Complaince</a></li>
<li><a href="hybrid-cloud-advisor"> Cloud</a></li>
<li><a href="apps-customdevelopment">Development</a></li>
<li><a href="managed-services">Managed Services</a></li>
<li><a href="upgrade-migrations">Migration & Upgrades</a></li>
<li><a href="social-strategies">Social & Communication Computing</a></li>
<li><a href="business-intelligence">Business Intelligence</a></li>
<li><a href="lync">Unfified & Federated Communication</a></li>
</ul>
</li>
<li><a href="capabilities"> <span class="flaticon_capability"></span> Capabilities</a>
<ul>
<li><a href="big-data">Big Data & Analytics</a></li>
<li><a href="web-technologies">Web Technologies</a></li>
<li><a href="infrastructure-services">Infrastructure Services</a></li>
<li><a href="project-serverconsulting">Project server Consulting</a></li>
<li><a href="dynamcs-crm">Customer Relationship Management</a></li>
<li><a href="apps-customdevelopment">Custom Application Development</a></li>
<li><a href="hybrid-cloud-advisor">Cloud Services</a></li>
<li><a href="mergers-acquisitions">Mergers & Acquisitions</a></li>

</ul>
</li>
<li><a href="digital-business"><span class="flaticon_digi"></span> Digital Business</a>
<ul>
<li><a href="business-consultingservices">Business Consulting Services</a></li>
<li><a href="advisory-services">Advisory Services</a></li>
<li><a href="hybrid-cloud-advisor">Hybrid Cloud Strategies</a></li>
<li><a href="digital-strategy">Digital Strategy & Innovation </a></li>
<li><a href="technology-assessment">Technology Assessment & Selection</a></li>
</ul>
</li>
<li><a href="technology"><span class="flaticon-cloud158"></span> Technology</a></li>
<li><a href="find-solutions"><span class="flaticon-search"></span> Find Solutions</a></li>
<li><a href="contact" target="_blank">CONTACT</a></li>
<li><a href="careers">CAREERS</a></li>
<li><a href="blog">BLOG</a></li>
<li><a href="hybrid-cloud-advisor">HYBRID CLOUD ADVISOR</a></li>
<li><a href="how-we-work">HOW WE WORK</a></li>
<li><a href="expert-insights">EXPERT INSIGHTS</a></li>
<li><a href="digital-business">ABOUT US </a>
<ul>
<li><a href="leadership">LEADERSHIP</a></li>
<li><a href="publications">OUR PUBLICATIONS</a></li>
</ul>
</li>
</ul>

</nav>

<div class="header mobile-header">
<div class="header-content">
<div class="logo"> <a href="index"><img src="images/epc_logo1.jpg" alt="EPC Group.net"/></a></div>
<a href="#menu-mobile" class="mobilemenu"></a>

<div class="searchForm" style=" float: right; margin-top: 5px">
<script>
(function() {
var cx = '008246310589030503812:aqmn16liujs';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
</div>
</div>
</div>


JS:-

view-source:http://www.epcgroup.net/ecp_stage/js/mobile-navigation.js


CSS:-

view-source:http://www.epcgroup.net/ecp_stage/css/mobile-navigation.css


I tried to fix it through this link:-

$(document).click() not working correctly on iPhone. jquery

But i didn't succeed.

Note:-

you need to see it in real device, not in browser mobile window. (It's working there)

Just pointers is also enough. Please help me!

Answer

After checking the code and screatching my head i got it working by below changes:-

1. The div structure of the menu bar(mobile version) is not correctly structured (as documented in plugin):-

previously its:-

<div class="header mobile-header">
  <div class="header-content">
     <div class="logo"> <a href="index"><img src="images/epc_logo1.jpg" alt="EPC Group.net"/></a></div>
        <div class="mm-page"> <!-- this is causing the problem -->
            <a href="#menu-mobile" class="mobilemenu"><img src ="images/Menu-Icon.png"></a>

And now it's :-

<div class="mm-page">
    <div class="header mobile-header">
        <div class="header-content">
            <div class="logo"> <a href="index"><img src="images/epc_logo1.jpg" alt="EPC Group.net"/></a></div>
                <a href="#menu-mobile" class="mobilemenu"><img src ="images/Menu-Icon.png"></a>

Actually this div have to come on top before any other div so that in mobile view it's z-index change will reflect and it will work properly.

Due to my code my container(content container) is coming up-side on div and that's why click is working but the side-bar not showing because z-index is not reflecting properly.

2. A bit css change in z-inedx of my container and mobile-menu container at media screen is needed (Make mobile-menu container z-index higher than container div)

I am sorry that i just did such a foolish mistake

Conclusion:-

follow the same structure as given in any plugin structure (not only this one but for all). It's my major mistake.

Comments