Pro Theme Is Not Working As Intended With Anchor Links On Mobile

Support
#1

Hello support,

Whenever Anchor-text is added in the layout box of Advanced settings on posts / pages then this link is then added with /#anchor-text e.g. “scroll to top” anchor to first paragraph. The issue is on mobile, when you scroll to the bottom of the page, the copyright, or theme footer cannot be visible, it continues to jump around.

Live example, on mobile go to:
on mobile;

Does not scroll to bottom: https://vitalytennant.com/3-tips-to-help-you-plan-your-corporate-event/
Scrolls to bottom: https://vitalytennant.com/4-common-security-mistakes-your-small-business-must-avoid/

Even when all plugins are disabled, and this is replicated, same issue occurs with Anchor and Anchor Link being on the same page / post.

This does not occur if anchor link is going to different page / post. Only when on same page / post.

Looking forward to having this fixed, this is an issue for many factors.

Regards.

#2

Hello @VVT,

Thanks for writing in! I have checked both pages and the EZ Table of Contents plugin may be causing the issue. Do you have a staging site where we can test both pages while the EZ Table of Contents plugin is disabled? We need to investigate this issue further as this does not happen in our local test servers.

Best Regards.

#3

Hi @ruenel,

When the EZ Table of Contents plugin is disabled, the anchor issue still persists. Of course, when EZ Table of Contents is disabled, the issue goes away because the anchor links are removed. While the plugin is disabled, and anchor tag and link are added as aforementioned, the issue persists of not being able to scroll to the bottom of the website. We do not have a staging site enabled. It only works when anchor tag and link are removed from the page, e.g. scroll to top. All this is replicable on a mobile device.

This is some sort of code issue. What information would you like to have this fixed?

Regards.

#4

Hello @ruenel,

Scroll To Top anchor has been added to https://vitalytennant.com/crypto-security-circle/ when going to it on mobile device, the footer with copyright, etc. the bottom of the website is distorted, and “jiggles” when trying to scroll all the way to the bottom. Whether EZ Table of Contents plugin is enabled or not, the issue is the same, and persists.

Regards.

#5

Hi @VVT,

I have checked the URL on the smaller screen and my Android mobile but didn’t find the issue you described here. Can you please provide any screenshots marked with the issue or any video that helps us to recognize the problem?
I would also request you please mention the device, browser name and version, and also the operating system you are using, which helps us to replicate the issue at our end.

Thanks

#6

Hello @tristup,

Thank you for your response.

This does not work on any mobile device. The browser does not matter, it’s viewability on smartphone issue.

Here are 2 video recordings on Android device, Chrome browser, although this does not work on any browser, and/or mobile OS does not make a difference:

Not working (with anchor): https://drive.google.com/file/d/1Kc_lGy3CuW01emb32xwhPC9Zv5GzIrMh/view
Working (without anchor): https://drive.google.com/file/d/1KbpVVVKVK6K8jBWbMynbmB4Qh8l_-Hr3/view

Regards.

#7

Hi @VVT,

I have checked it multiple times on different mobile devices and found it is working. I have also seen that you are using the custom Scroll to Top function, whereas there is a built-in functionality that can be enabled through the Theme Options. But that will be activated on all the pages.

Screenshot_20230810_182835
Screenshot_20230810_182835720×1600 152 KB

I would suggest you please copy your live site to a staging server so we could troubleshoot freely without breaking your live site.
And give us access in the secure note including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

secure-note
secure-note1040×250 15.3 KB

Thanks

#8

Hello @tristup,

It doesn’t work. Including in the screenshot you provided, it does not work on CSC page, and the issue is exactly like it is in the videos. As described, in detail, and in video, anything with anchor font, either on page or post does not scroll to the bottom all the way, and Copyright footer cannot be seen, on all mobile devices. If you have a video to provide with it working, then we can assume otherwise.

Staging info will be provided momentarily.

Regards.

#9

Hey @VVT,

Great and let us know when the staging is up so that we can check on your setup properly.

Thank you.

#10

Hello @marc_a, staff

Message Update:

Regards.

#12

Hey @VVT,

Just want to update you on this thread, I am still checking on this issue. I’ll update you once again after my investigation.

Thank you.

#13

Hello @marc_a,

Thank you.

This seems to be Xpro issue, because where ‘scroll to top’ is on the CSC page, there is no TOC table there, however the issue remains of not being able to scroll all the way down, on any mobile device, as per videos. And that’s with a simple anchor text link.

In terms of TOC plugin there is raised a ticket on GitHub https://github.com/ahmedkaludi/Easy-Table-of-Contents/issues/561

Looking forward to having this fixed.

Regards.

#14

Hello support,

Checking in on this.

This is a clear theme issue.

Best regards.

#16

Hey @VVT,

Sorry for the late response, the issue has something to do with the Easy Table of Contents. I’ve troubleshot by deactivating the said plugin and testing the page, which works fine.

Easy Table of Contents plugin deactivated

image
image667×986 153 KB

If you wish to retain the Easy Table of Contents and be able to scroll to the bottom of the page to see the copyright section, you may add this custom CSS code.

@media (max-width: 979px) {
	body.x-navbar-fixed-top-active .x-navbar-wrap {
	    height: 50px !important;
	}
}

when the code is added it works fine and I also tested it on my actual mobile device.

image
image1080×2340 267 KB

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

#17

Hello @marc_a,

Thank you for your response, and CSS insight.

When ETOC plugin is deactivated, the anchor text, and link does not work.

As aforementioned:

By adding this code, does not fix the issue when the plugin is deactivated. Is it possible to add this code to fix all via an update to the theme itself?

Unless you’re saying that the CSS code is a fix for all theme issues. Although it’s the anchor / text and link that causes this.

Looking forward for a solution that will not arise with every edit so to say.

If you think that this can be incorporated into the theme itself via an update.

Regards.

#20

Hello @marc_a,

Thank you.

The provided code works.

It would be nice to have the theme parameters expand with added content to posts and pages, since this includes something simple such as anchors which cause this issue.

ETOC plugin will update, via communication with their support.

Successfully.

#21

Hey @VVT,

We have been unable to reproduce the problem on our developmental website, which prevents us from definitively categorizing this as a bug. It is worth noting that variations in website configurations can potentially contribute to the emergence of this issue. Nevertheless, I’m appreciative that the provided code functions as intended. Prior to sharing it with you, I conducted thorough testing and can confirm its compatibility with the activated ETOC plugin.

Thank you.

1 Like
#22

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.