Menu Items Pointing To Section ID do Not Work On First Click...
Francois Barnard
Hi
I am using J4.4.0, SPPB 3.8.10, and Helix Ultimate 2.0.16 to develop a new site. It is mostly a one-pager site, so I use the Section ID field a lot. In the menu manager, my menu items point to a URL, eg. "About" would point to /#about and "Membership" would point to /#membership etc. I have learned to set my row's top padding to 70px to get the desired result.
When clicking on the menu on the front-end, eg. "Membership," the page scrolls down to the section ID for "Membership", but stops short of the correct position. Clicking on the same menu item a second time takes it to the correct position. Thereafter, all the menu items navigate correctly.
However, clicking on "Home" to have the page reload results in a repeat of the above. The menu items pointing to the Section ID do not work on first click, but scrolls down to the incorrect position.
It is curious to note that it scrolls down to the first Section ID correctly, but not the second item or any of them thereafter.
I have seen this problem before on other webpages I built, but at some stage it had been resolved, and I cannot figure out why. The only difference at the moment is that this site is on a sub-domain and the others are on the root domains.
Any ideas?
Thank you!
Francois
Toufiq
Accepted AnswerHi there,
I appreciate you reaching out. I sincerely apologize for this oversight. The OnePage template template section shouldn't use unusual sections before your section. Before membership page had one more section that didn't use any navigation.
-Thanks
Francois Barnard
Accepted AnswerDear Toufiq
Thank you for your reply. You were right, there was one unused Section ID called "board" which I have now removed. However, it did not change the behaviour of the navigation. On first click on ABOUT it works fine. You go to HOME again, click on any of the others below ABOUT, eg. MEMBERSHIP or TRAINING & CERTIFICATION or EVENTS or CONTACT, and it navigates to a potision above the Section ID. Only on the second click does it navigate to the correct position.
This is difficult to explain to my customer.
Is there anything else I missed?
Regards,
Francois
Toufiq
Accepted AnswerHow it works exactly: You five sections & five menu items (it will work fine). You have five menu items & more than five sections then it will not works for the top space. One page navigation js always try to use their own offset which is declared on the onepage navigation js file. When it's find extra space on top then it doesn't work properly.
Francois Barnard
Accepted AnswerDear Pavel
Thank you for your reply.
I have moved the website now to its final web space mentioned in the hidden content below and turned the Lazy Load off. I tested and it did not make a difference. I then tested with MS Edge and it worked. I returned to Chrome, cleared the cache and at first it seemed to work. But by the third attempt it was back to its old tricks.
On Chrome, I cleared the cache again and also cookies, reload the page (Ctrl-Shift-R), but to no avail. I returned to Edge, cleared all cache and cookies and for the first two attempts it seemed to work, but then behaved erractically, only moving to the chosen Section ID on occation, not every time.
I have other sites where it works perfectly. Any other ideas?
Regards,
Francois
Pavel
Accepted AnswerI have moved the website now to its final web space mentioned in the hidden content below and turned the Lazy Load off.
Hi Francois. I am not an employee of support, so I do not see hidden content.
The fundamental reason for the problem is that the height of some element(s) is not determined by browser before the first click (load all DOM). I predicted that this is Lazy Load. Since this does not happen with the ABOUT section (menu item), but it happens with all sections below in which there are images.
Lazy Load is not only in SPPB but also in Helix. Check the Lazy Load shutdown in all places. There is no other idea.