One Page Navigation Highlight Active ID on Scroll in Chrome

Support
#1

Hi theme.co team

I’m using a second menu on the right hand side to indicate where a viewer currently is on the page.
(just # links to section ID’s.)
In addition, I use particles as the active effect when a viewer comes to a new section.

This works neatly in Safari, Firefox and Internet Explorer, where it hops from one menu item to the other, but in Google Chrome the particle effect seems to be stuck on the first section ID.
I also tried to activate the one page navigation in page settings (I hadn’t activated this before and it worked in the other browsers), but it has no effects.

Do you have a clue what could cause this behavior in Chrome?

Thanks!

#2

Hey @lucbas,

I’ve imported your header to my test site and the active particle works.

I am currently trying to find what is causing this in your site. Would you mind copying your site to a staging server so we could troubleshoot deeper. Give us WordPress Admin and FTP access to your staging server.

For the meantime, please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks.

#3

Hi Christian

Thanks for your help! You can find the details in the secure note!

#4

I’m sorry but what is your staging domain? And, is the FTP credentials for the staging server. If you have not created a staging site, please follow the guide at https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

We could not touch your live site due to the risks involved.

Also, did the plugin conflict test made any difference?

Thanks.

#5

Hi Christian

Thanks for your response, I just tried to deactivate all plugins (except Cloudflare) and reactivating them again, but the issue persisted.

I saw that in the navigation at some point (near the end of the page) skips 5/6 menu items and works for some entries. Still unreliable tho.

We don’t have a staging environment just yet, but I will set one up for you to test, thank you!

#6

Hi There,

Please setup a staging site and give us the details so that we can have a look.

Thanks

#9

Hi Basanta

Sorry for the delay, creating the staging site took a bit longer, but it’s here now! :smiley:

In the meantime I did some testing:
As a recap, the side navigation works perfectly on Internet Explorer, Safari and Firefox. The issue is only apparent in Chrome (strange!).
I recreated the site and the side navigation seem to work until I was finished adding 60%/70% of the content and then the issue started to appear. I seems (I don’t know if that’s the issue) that it could come because of the size of the page. I tried to remove sections and add other ones and I was not able to narrow it down to a specific element.

Maybe it’s something else entirely.

You can find the details in the secure note :wink:

#10

Hi @lucbas,

It works okay on items at the end of the menu. And based on the behavior, it’s similar to structure issue where some sections get under other existing sections due to the broken element. How about cleaning your content first, by removing these invalid elements <o:p></o:p> and similar.

You can also check your page here https://validator.w3.org and see if there are still invalid elements and unclosed/stray HTML elements. And it will only work if you’ll set your page public.

Thanks!

#11

Hi Rad

Thanks pointing out these errors!
I did remove most of them on the page mentioned in the secure note, but unfortunately the error still persists on Chrome.

Do you have more ideas on what could cause the behavior? What do you mean by sections getting under other sections?

Thank you!!

#12

Rad meant that if you have broken HTML in your content, sections will get mixed up thus causing this issue.

I created a new test page and setup 3 sections with only Gap elements to enable page scrolling and assigned ID linked to your menu items. The result was, the menu highlight works. Just note I only setup 3 because you have lots of menu items (see secure note).

This only means that there’s some broken HTML in your content. I still see strange HTML like what described in your content. Please remove them all and also find unclosed HTML tags. If you are unable to do this, please hire a web developer to do this for you.

You can also try removing contents one by one to see where the broken HTML is located.

Thanks.

#13

Hi Christian

Thanks for your reply!

I checked with the w3 validator and there are only some minor errors that should not cause significant errors.

As a test, I installed the duplicate post plugin and created 2 clones of the affected page.
Afterwards I deleted the bottom half of the first clone and on the second clone I deleted the first half.
Then I tested the sidebar navigation and they both without any problems on both clones.

This would go back to my previous assumption that there could be an issue with the amount of sections/id links on the page and Google Chrome.

As there seemed to not be an issue with the section/html, I tried to do more testing and thought maybe it could be something with the navigation itself.
I then created another side navigation that has fewer #id links and here we go!!!
That seems to be the issue on Chrome! Just to many #id links!

Do you know if this is a bug? I don’t think there is an obvious solution to it.

Thanks!

#14

Hello There,

Are you using the latest Chrome version? This could be a browser issue.
You may need to test these pages in Firefox as well and compare the results.

It may not be a bug. I guess it maybe the way how browsers render the page with ID links.

Best Regards.