Navigation bar buttons not working on iPad

[Reb92]

Sorry if my terminology is really bad. I am a total novice. I purchased your HTML5 Template and have been designing a website based off of your Gym template.

Everything works perfectly on a desktop. Everything so far seems to work perfectly on a smaller screen with the hamburger menu. But I have noticed – even with the gym demo that is live on your website (so I know it is nothing I’ve done), that when viewing that demo on a iPad – landscape view with the navigation buttons, you need to click the button twice for it to go to that page. I feel like this must be an error in your coding? It isn’t good that you need to click twice – once to highlight and then again to actually go to that page. On the desktop with navigation bar or hamburger menu on any device, you only need to click once.

Is this a deliberate coding or can you offer a fix for it?

Thanks!

---

[Support]

Hello, thanks for your purchase.

This is actually a behavior that the browser on Ipad has, the first click is for “hover” and the second is for the redirect, so if you want force the redirect on click on ipad only you can add the following JS script:

(js/custom.js)

$(window).on('load', function() {
	var isiPad = navigator.userAgent.indexOf('iPad') != -1

	
	$('.nav-link').on('click', function(e) {
		if (isiPad) {
			if ($(window).width() > 991) {
				location.href = $(this).attr('href');
			}
		}
	});
});

Let me know if you need further assistance.

Best Regards,

Okler Themes

---

[Reb92]

Hi,

Thanks for your response. I pasted the code into my js/custom.js file… but presumably there are things I need to fill in so it works? There are currently numerous error messages. Your template has been amazing so far and I have been able to adjust anything not to my liking so far through trial & error and with the help of your website and Google, but I fear this is beyond my capabilities at the moment.

I have looked at your other templates – for instance, the Demo Medical 2 template. This one the navigation bar buttons do work with one click on the iPad. Therefore you reason that it is the behaviour of the iPad browser that doesn’t make sense to me. Is there maybe something in the coding there that could help?

I told you I was a novice! :/

Thank you again for your response. Hopefully you´ll be able to assist further.

Thanks!

---

[Support]

Hi, it’s possible, but it will lose the navigation effect from Demo Gym, so if you want to change that to standard navigation you can use the following code:

<div class="header-nav header-nav-links order-2 order-lg-1">
	<div class="header-nav-main header-nav-main-square header-nav-main-effect-1 header-nav-main-sub-effect-1">
		<nav class="collapse">
			<ul class="nav nav-pills" id="mainNav">
				<li class="dropdown-secondary">
					<a class="nav-link text-color-light text-color-hover-primary" href="index.html">
						Home
					</a>
				</li>
				<li>
					<a class="nav-link text-color-light text-color-hover-primary" href="index.html">
						Contact Us
					</a>
				</li>
			</ul>
		</nav>
	</div>
	<button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
		<i class="fas fa-bars"></i>
	</button>
</div>

Jus replace the entire navigation, where you have this <div class="header-nav… and use the code I provided

---

[Reb92]

That’s fantastic! I now have it working perfectly. Thank you very much 🙂

---

[Author]

Posts