Anchor ID not working on mobile

Hello - I have read other posts about this issue, but none seem to apply to my situation — at least I don’t think they do.

Could you kindly check this link on mobile and let me know what the issue may be?

X Theme 7.2.3

Appreciate your help!

Hello @ccwadsworth,

I have checked your page and that is because you have two areas of the page where you added the ID carolyndragon. That is for the section and the headline element. By rule, you should not have two common IDs on a page so kindly get rid of the ID on one of those elements mentioned.

Hope this helps.

Hi Jade, thanks so much for your prompt response.
My bad. I did not see the duplicate listed in the column, as I knew I used different IDs in the section.
However, I removed the dupe, cleared cache on desktop and mobile and it is still not linking properly.
Any suggestions?

I tested this again using a different anchor (#coach&co-lead) and got the same result (on iPhone).
Screen shot attached.

Hi @ccwadsworth,

The & is not an allowed character for an ID name: https://www.w3.org/TR/CSS21/syndata.html#characters

Try changing coach&co-lead to coach-co-lead.

Hope this helps.

Oh, ok. I’ll adjust that, but the #carolyndragon link is still not working.

Hello @ccwadsworth,

The element ID must be unique. There should not be any other element bearing the same ID name which is happening in your page.
_PAL2JDgTC2xslhQC0sO4Q

bios must only be assign to one of the sections.
coach&co-lead must be coach-co-lead.
And carolyndragon must be added as a section ID and not to the row container.

To learn more about HTML ID, please check this out:

Hope this helps.

Thank you, this is incredibly helpful!
I clearly copied the sections after I inserted the tag and didn’t realize it was there.
I also was not aware that the tags belong in the sections, not rows, so I have adjusted that as well.
I appreciate this graphic and your time.
Thank you very much!

You’re most welcome.

Hi Jade - another interesting discovery

on mobile…
when I am any page other than the About page, the menu links are not working properly for any of the options under the About dropdown

For example, if you go to Home, Programs, Gatherings, Praise, Inspiration or Contact on mobile

THEN select About > Coaches & Co-Leads, you are taken to the top of the About page (graphic for 100 for $100).

IF you start on the About page THEN select About > Coaches & Co-Leads, you end up in the correct spot: the gold bar that says Coaches & Co-Leads.

Any idea why the navigation functions differently on all pages other than the About page?

Hi @ccwadsworth,

It’s actually working, if you’ll check it’s in a correct position upon load but suddenly pushed down due to sliders when it’s rendered. And the slider takes a whole screen, hence it’s pushed outside the viewport.

Could you try disabling your cache, then remove this custom JS

jQuery(document).ready(function($){
	$('.x-nav-wrap.mobile .x-nav a').on( "click touchstart", function() {
		$('.x-nav-wrap.mobile').removeClass('in');
	});
});

Then please try again, but make sure to save a backup of your code. It seems the slider is triggered late causing this issue on mobile.

Thanks!

Hi Rad
I went to remove the custom JS and it’s completely empty.
My CSS is not accurate either; it looks like it’s from the demo.
None of my custom code is appearing??

Hey @ccwadsworth,

Based on your screenshot, you’re looking at the Content JS. The script mentioned by Rad could be in the Global JS. Try finding it in Theme Options > JS.

If the Global JS is empty, please give us the following info in a Secure Note so we could check your setup.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thanks.

Thank you Christian, I did locate it.
Thanks for pointing that out.

However, that did not solve the problem.

I am still having issues with items on the About dropdown menu when I try to access them from any other page on the site, other than the About page. When I am on the About page and access the About menu, it behaves appropriately. When I am on any other page and access items on the About menu, it does not.

I do not have these issues on the desktop.

Here a few pages with issues - there are more - could you please test these pages on mobile, starting from any page other than the About page? Then test them again from the About page? The correct end point appears on the desktop, for comparison.

https://www.tenwomenstrong.net/about/#coach-co-lead (should land on gold bar with the same name)
https://www.tenwomenstrong.net/about/#advisors (should land on title bar)
https://www.tenwomenstrong.net/about/#debbeany (lands on Kristeen Barth)

Test any of the links under About > Our Coaches & Co-Leaders, none of them are ending up in the right place.

I would be happy to provide login information if that will help.
I appreciate your help, thank you!

P.S. I’m not sure if this is related, but we changed the domain name on the hosting account from thepoetsway.com to tenwomenstrong.net around May 7th this year. thepoetsway.com was the domain we used when we opened the hosting account with BlueHost, but we released that domain name and needed to change the primary domain on the hosting account. I’m not sure if this is relevant, but wanted to let you know.

Hi @ccwadsworth,

I investigated this and this is a bug, which already fixed on our unreleased version. You can try installing the copy I’ll provide in the secure note.

Please note that you’ll have to re-install both X theme and Cornerstone (you must deactivate and delete them before installing).

Thanks!

Thank you @rad
I just tried to open the file and received this message:
The folder “x unreleased 2020” can’t be opened because you don’t have permission to see its contents.

Hey @ccwadsworth,

I’m sorry but I’m not sure why you’re getting that and I’m not sure why you’ll open the x.zip file because it should just be installed in your site. I just downloaded the x.zip file in Rad’s link and it works.

Please tell us what exactly you did so we can replicate the message you see.

Thanks.

Thanks, I am getting this bug too… although the anchor works if my tag is in a section of the page, but NOT when the anchor is in the footer:
https://watchungcap.com/#contact

This is a single page site, with two menu items, #about and #contact. As I said, the #about menu item works on mobile, but not the #contact… which is in the footer.

Hi Christian
I wanted to open the folder to see if Cornerstone was included, as I was instructed to upload both.
I downloaded the zip file, unzipped it and then tried to open the folder to see the contents; that’s when I received the error.

I was able to upload the zip file in WordPress, deleted cache on my phone and I am still experiencing the same issues.

Hi @ccwadsworth,

Thank you for the follow up. We will double check to see why the problem persists. Would you please kindly give us access to your website files via FTP, so if needed we install the theme new files manually and see if it fixes the issue?

Thank you for your cooperation.

Ok - I would be happy to try that too, but I was unable to open the folder.