I have a nav menu with dropdown lists. When running locally and clicking the element the dropdown menu list appears perfect. When actually attempting on a mobile device it does nothing. Any suggestions why this maybe happening and how to fix?
I have figured that the script injecting the header.html is breaking the toggle? If I put the entire header.html code in index.html the dropdown works on mobile .... any suggestions / alternatives to how I am injecting the header.html code, other than PHP.
Html (index.html)
<!-- Header -->
<header id="main-header" class="header-main header-dark fixed-top header-fluid">
<script>
fetch('/includes/header.html')
.then(response => response.text())
.then(value => {
document.getElementById('main-header').innerHTML = value
});
</script>
</header>
<!-- Header End -->
Worth noting I am injecting the header via JQuery - see screenshot below
Feel free to demo at http://credit.fleetfactors.co.uk, try on desktop, mobile and desktop (inspect as mobile device)...
Scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/vendor/counter/jquery.countTo.js"></script>
<!-- typed -->
<script src="static/vendor/typed/typed.js"></script>
<!-- owl-carousel -->
<script src="static/vendor/owl-carousel/js/owl.carousel.min.js"></script>
<!-- magnific -->
<script src="static/vendor/magnific/jquery.magnific-popup.min.js"></script>
<script src="static/vendor/isotope/isotope.pkgd.min.js"></script>
<!-- svg-injector -->
<script src="static/vendor/svginjector/svg-injector.min.js"></script>
<!-- jarallax -->
<script src="static/vendor/jarallax/jarallax-all.js"></script>
<!-- count-down -->
<script src="static/vendor/count-down/jquery.countdown.min.js"></script>
<!-- working form -->
<script src="static/vendor/mail/js/form.min.js"></script>
<script src="static/vendor/mail/js/script.js"></script>
JQuery
CRE.MegaMenu = function() {
var mDropdown = $(".px-dropdown-toggle")
mDropdown.on("click", function() {
$(this).parent().toggleClass("open-menu-parent");
$(this).next('.dropdown-menu').toggleClass("show");
$(this).toggleClass("open");
});
}
Includes (header.html)
<div class="header-top header-border-bottom small">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<!-- Left -->
<div class="d-flex align-items-center justify-content-center d-none d-lg-block">
<ul class="nav">
<li class="nav-item me-3 text-white">
<span>
<i class="fa fa-envelope me-2"></i>
Email: sales@fleetfactors.co.uk
</span>
</li>
<li class="nav-item">
<a href="#" class="navbar-link text-white">
<i class="fas fa-headset me-2"></i>
Call: 01642 770 664
</a>
</li>
</ul>
</div>
<!-- Right -->
<div class="d-flex align-items-center justify-content-center w-100 w-lg-auto">
<!-- Language -->
<div class="dropdown ms-0 ms-lg-3">
<a class="dropdown-toggle text-white" href="#" role="button" id="dropdown_language" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa-fw me-2 bi bi-globe"></i>Global</a>
<div class="dropdown-menu mt-2 shadow" aria-labelledby="dropdown_language" style="margin: 0px;">
<span class="dropdown-item-text">Select Site</span>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fa-fw me-2 bi bi-cart4"></i> Fleet Shop</a>
<a class="dropdown-item" href="#"><i class="fa-fw me-2 bi bi-upc-scan"></i> E-Cat</a>
</div>
</div>
<!-- Top link -->
<ul class="nav ms-auto ms-lg-3">
<li class="nav-item">
<a href="/contact-us.html" class="nav-link text-white">Contact</a>
</li>
<li class="nav-item">
<a href="/downloads.html" class="nav-link text-white" data-bs-toggle="modal" data-bs-target="#topbarlogin"><i class="fa-solid fa-folder-open me-2"></i>Downloads</a>
</li>
</ul>
<!-- Top social -->
<div class="nav header-social justify-content-end d-none d-lg-block">
<a class="h-social-link" href="#"><i class="bi bi-facebook"></i></a>
<a class="h-social-link" href="#"><i class="bi bi-twitter"></i></a>
<a class="h-social-link" href="#"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- End Top Header -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="index.html">
<img class="logo-dark" src="/static/img/fleet-logo-dark.svg" width="160px" title="" alt="">
<img class="logo-light" src="/static/img/fleet-logo-light.svg" width="160px" title="" alt="">
</a>
<!-- Logo -->
<!-- Mobile Toggle -->
<button class="navbar-toggler ms-auto me-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- End Mobile Toggle -->
<!-- Menu -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a href="https://fleetfactors.co.uk" class="nav-link">
Home
</a>
</li>
<li class="dropdown nav-item">
<a href="#" class="nav-link">Company</a>
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/company/about-us.html">About Us</a></li>
<li><a class="dropdown-item" href="/company/team.html">Our Team</a></li>
<li><a class="dropdown-item" href="/company/corporate-social-values.html">Corporate Social Values</a></li>
<li><a class="dropdown-item" href="/company/qhse.html">QHSE</a></li>
<li><a class="dropdown-item" href="/careers.html">Careers</a></li>
<li><a class="dropdown-item" href="/news.html">News & Events</a></li>
</ul>
</li>
<li class="dropdown nav-item">
<a href="#" class="nav-link">Services</a>
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/brands.html">Brands</a></li>
<li><a class="dropdown-item" href="/services/stores-management.html">Stores Management</a></li>
<li><a class="dropdown-item" href="/services/commercial-parts.html">Bus, Truck & Trailer Parts</a></li>
<li><a class="dropdown-item" href="/services/consumables.html">Consumables</a></li>
<li><a class="dropdown-item" href="/services/lubricants.html">Lubricant Products</a></li>
<li><a class="dropdown-item" href="/services/refinish.html">Refinish Products</a></li>
<li><a class="dropdown-item" href="/services/ppe.html">PPE Products & Embroidery</a></li>
<li><a class="dropdown-item" href="/services/janitorial.html">Janitorial Products</a></li>
</ul>
</li>
<li class="dropdown nav-item">
<a href="#" class="nav-link">Resources</a>
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/resources/brand-guidelines.html">Brand Guidelines</a></li>
<li><a class="dropdown-item" href="/resources/promotions.html">Promotions</a></li>
<li><a class="dropdown-item" href="/resources/brochures.html">Brochures</a></li>
<li><a class="dropdown-item" href="/resources/accreditations.html">Accreditations</a></li>
</ul>
</li>
<li class="dropdown nav-item">
<a href="#" class="nav-link">Support</a>
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/support/returns-policy.html">Returns</a></li>
<li><a class="dropdown-item" href="/support/delivery-policy.html">Delivery</a></li>
<li><a class="dropdown-item" href="/branch-locator.html">Branch Locator</a></li>
<li><a class="dropdown-item" href="/contact-us.html">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
<!-- End Menu -->
<div class="nav flex-nowrap align-items-center">
<!-- Nav Search-->
<div class="nav-item">
<a class="nav-link pe-0 collapsed display-7 py-0 me-3" data-bs-toggle="collapse" href="javascript:void(0)" data-bs-target="#search-open" aria-expanded="false">
<i class="bi bi-search display-8"> </i>
</a>
</div>
<!-- Nav Button -->
<div class="nav-item d-none d-xl-block">
<a href="#" class="btn btn-sm btn-outline-fleet mb-0 mx-2 text-nowrap">Login to Fleet Shop<i class="bi bi-arrow-right-short ms-2"></i></a>
</div>
</div>
</div>
</nav>