I have a megamenu in my laravel website. All the menu links are working properly in desktop version of the website.
But in mobile version no anchor tag links are working.
HTML
<div class="menu-container">
<div class="menu">
<ul>
<li><a class="nav-item nav-link" href="{{ url('/') }}">Home</a></li>
<li><a class="nav-item nav-link" href="{{ url('/clinic') }}">Clinic </a>
<ul>
@foreach($_SESSION['clinic'] as $data)
@foreach($_SESSION['all_clinic_with_services'] as $key=>$datum)
@if($key === $data->id)
<li><a href="{{ url('/clinic/'.str_slug($data->name, "-").'-'.$data->id ) }}">{{ $data->name }}</a>
<ul>
@foreach($datum as $value)
<li><a href="#">{{ $value->name }}</a></li>
@endforeach
</ul>
</li>
@else
@continue;
@endif
@endforeach
@endforeach
@foreach($_SESSION['all_clinic_without_services'] as $data)
<li><a href="{{ url('/clinic') }}">{{ $data->name }}</a>
@endforeach
</ul>
</li>
<li><a class="nav-item nav-link" href="{{ url('/technology') }}">Technology</a></li>
<li><a class="nav-item nav-link" href="{{ url('/photo-gallery') }}">Photo Gallery</a></li>
<li><a class="nav-item nav-link" href="{{ url('/price-list') }}">Price List</a></li>
<li><a class="nav-item nav-link" href="{{ url('/video') }}">Videos</a></li>
<li><a class="nav-item nav-link" href="{{ url('/about-us') }}">About Us</a>
<ul>
<li><a href="{{ url('/message-from-MD') }}">Messaging from Managing Director</a></li>
<li><a href="{{ url('/about-us') }}">About Laser Medical Center</a></li>
<li><a href="{{ url('/medical-consultant') }}">Medical Consultant</a></li>
<li><a href="{{ url('/medical-officer') }}">Medical Offficer</a></li>
<li><a href="{{ url('/nutritionist') }}">Clinical Nutritionist</a></li>
<li><a href="{{ url('/physiotherapist') }}">Physiotherapist</a></li>
<li><a href="{{ url('/nurse') }}">Senior Staff Nurse</a></li>
<li><a href="{{ url('/customer-service') }}">Customer Service</a></li>
</ul>
</li>
<li><a class="nav-item nav-link" href="{{ url('/contact-us') }}">Contact Us</a></li>
</ul>
</div>
script
/*global $ */
$(document).ready(function () {
"use strict";
$('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
//Checks if li has sub (ul) and adds class for toggle icon - just an UI
$('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
//Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
$(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");
//Adds menu-mobile class (for mobile toggle menu) before the normal menu
//Mobile menu is hidden if width is more then 959px, but normal menu is displayed
//Normal menu is hidden if width is below 959px, and jquery adds mobile menu
//Done this way so it can be used with wordpress without any trouble
$(".menu > ul > li").hover(function (e) {
if ($(window).width() > 943) {
$(this).children("ul").stop(true, false).fadeToggle(150);
e.preventDefault();
}
});
//If width is more than 943px dropdowns are displayed on hover
$(".menu > ul > li").click(function (e) {
if ($(window).width() <= 943) {
$(this).children("ul").fadeToggle(150);
e.preventDefault();
}
});
//If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
$(".menu-mobile").click(function (e) {
$(".menu > ul").toggleClass('show-on-mobile');
e.preventDefault();
});
//when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
});
Is it script related problem ?
Where to change? Someone Help me, please?
I have already post this issue in stackoverflow before but no answer got. That's why repost the issue again. Please help.
It because of the e.preventDefault().
You can see in the example below that the first li has event.preventDefault() so the click on the link inside do nothing and the second works.
It's happening only on mobile because only on mobile (if ($(window).width() <= 943) {) you call the preventDefault on click.
<script src="https://code.jquery.com/jquery-git.js"></script>
<ul>
<li class="click-not-working"><a target="_blank" href="https://google.com">Click is not working</a></li>
<li><a target="_blank" href="https://google.com">Click does work</a></li>
</ul>
$('.click-not-working').on('click', e => {
e.preventDefault();
})
https://jsbin.com/xugilaguku/edit?html,js,output
I'm not sure why you need this in the first place..