- This topic has 8 replies, 2 voices, and was last updated 1 year, 5 months ago by
.
-
Posts
-
Here’s an example link:
https://www.midlifechangecoach.com/
On mobile Safari, on iOS, the 2 links anchor links (in Hero section and half way down the page) require 2 touches to work.
After they have worked once, they tent to keep working. So, you need to refresh the page to see the problem again.
From doing a bit of research and getting support in other places, I ‘think’ that the first touch seems to activate the hover. Then a second touch goes to the Anchor link.
Also, the problem instantly goes away if I switch theme. So, I think it’s something to do with the Signify Pro theme.
The buttons in this example are “Kadence Blocks – Advanced Button”s. However, I have just done a separate test with standard WordPress buttons and the problem is just the same.
How can this be fixed?
Thanks,
Damian@DAMIAN, we apologize for the late follow-up.
It looks like that link needs a complete URL like this https://www.midlifechangecoach.com/#intro-call
Hi @PSINK,
Thanks for responding, but that doesn’t fix the problem.
Take a look at this test page:
https://www.midlifechangecoach.com/buttontest/I have edited the link on that page so that it points to:
https://www.midlifechangecoach.com/buttontest/#intro-callBut, the issue is still exactly the same. The button needs to be pressed twice on iOS mobile Safari (iPhone).
I have also added a new standard WordPress button, underneath (the red one), with no CSS changes. This also requires two touches.
It must be an issue with the theme. The first touch seems to activate the hover state, and the second touch ‘works’.
Is it possible to remove the hover state on touch devices?
Or is there any other solution that you can think of?
Thanks,
DamianWe apologize for a late follow-up
I have a solution, hope this will work on your site
here is the js code, this will trigger the click event which will scroll the target to top
$(‘.kb-btn_4700f2-a7’).click( function(){
$(‘html, body’).animate({
scrollTop: $(“#intro-call”).offset().top
}, 200);
} );Please add this js on your site, here is the screen record on how to add js
https://www.awesomescreenshot.com/video/17317819?key=af8ee934de87c71af3ff97f04bfc93ddPlease let us know if this works
Hi @PSINK,
Thanks for this. I haven’t had time to test it yet, but it looks like it will only affect one button.
How can I fix all buttons?
Thanks,
Damianyou can repeat the code
$(‘btn – class_name or id’).click( function(){
$(‘html, body’).animate({
scrollTop: $(“target – classname or id”).offset().top
}, 200);
} );note. if you are using a class name theme put ‘.’ at the beginning if it is id then put ‘#’
for example
$(‘.kb-btn_c704ea-58’).click( function(){
$(‘html, body’).animate({
scrollTop: $(“#intro-call”).offset().top
}, 200);
} );‘kb-btn_c704ea-58’ is a unique class of button and ‘intro-call’ is a id of target
Finally got around to trying this.
It works!
🙂
Thank you @PSINK !
I’ve just added a class to all of the relevant buttons, which fixes them all in one go.
Thanks again,
Damian
- You must be logged in to reply to this topic.
