ScrollTo Navigation issue with sticky header

Support
#1

Hello,
I need some support with our navigation please.

we are using PRO 4.3.3. We have a sticky header, and there is also a scrolling feature with the navigation (some of the links in the menu are #anchor links).

There is an issue when, if you attempt to reach an anchor menu from a different page, it initially lands at the correct section, and then 1 second later scrolls away a few pixels.
To see what I mean, try to link to the ‘how we do it’ submenu item (below what we do) from the home page.

The menu works correctly if you’re only try to reach links on the same page.

We are also using Uber menu (although im not totally sure if it is Uber menu that is controlling scroll behaviour)

have you encountered this before? i can send you login details if necessary (this is just a staging site)

thank you

#2

Hey @SFI_AUS,

It looks like something is overriding the hash scrolling behavior of Pro. You might have done this already but you haven’t detailed it in your post so please confirm that you have done the following troubleshooting to narrow down what’s causing the issue:

  1. Testing For Plugin Conflict
  2. Child Theme
  3. Css/Js Customization
  4. Version Compatibility

Only if none in the list solves the issue, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin username and password

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

secure-note
secure-note1040×250 15.3 KB

Thanks.

#3

Hi @christian,
thanks for the reply.
ive sent a Secure Note with login details…

Since I’ve posted Ive made some more attempts to fix but its still not right. I’ve upgraded to a later version of MegaMenu, and I’ve removed some custom javascript code in the Global JS section of Pro.

So, it looks like the overriding of the scroll is no longer happening (probably fixed when i commented out the custom JS. If you want to look at the custom code i had, its line 339 and below.

the problem that remains is the scrolling anchor links are not accounting for the 110px height of the sticky header. but im not sure where that offset is supposed to go. i dont think its related to mega menu, but im not 100% sure.

Can you please take a look.

regards

SFI

#4

Hi SFI,

Please follow the solution provided here (Scroll-margin-top),

Hope it helps,
Cheers!

#5

@friech,
thanks for the link, but Im still uncertain how much of that advice applies to my current scenario. It mentions about creating a 2nd menu. I’m confused about how that would get implemented - how can you apply two sets of menus to the same set of navigation links?
As for some of the other points -
Yes we are correctly applying IDs to Section elements
The One Page Navigation is activated on the relevant page.
The only problem I need to address is the offset for the height of the header.

I would appreciate it someone were able to login for me and check this.

#6

Hi @SFI_AUS,

I suspect that this issue has been already resolved with the latest version of Pro. I have checked and found that you are still using the Classic or V1 elements like Classic Section, Classic Rows, I would suggest you use the V2 element instead of that and let us know if that resolves the issue.
If you still want to use the Classic Elements, you need to add the 45px padding to the top of the Section and the 45px margin to the top of the first Row of that Section.

Screenshot-449-

Screenshot-448-

Hope it helps.
Thanks

#7

Which version are you referring to? We are using 4.33 - I thought that was the latest?

Not all the elements are Classic. The Services section for example (the last nav item) uses V2 but it still suffers from the same problem.

This is not a great solution because that added space (the padding + margin) is visible to a user as they are manually scrolling through the page

#8

Hi @SFI_AUS,

I have checked your Header and found that the Shrink Amount is set to 0. I would suggest you set the value to 1 and check if that resolves your issue.

Screenshot-453-
Screenshot-453-653×823 51.6 KB

Hope it helps.
Thanks

#9

Hi @tristup
Yes that does help. thank you. its definitely almost there. Its not quite perfect. If you try it again. You will notice that, if you arrive on the What We Do page from a different page (like the home)…it initially goes to the wrong location…then there is a few seconds of loading… and then it goes to the correct location.
If you know a solution for that, it would be great
cheers

p.s is ‘Trigger Offset’ supposed to have a value (in the Header) ?

#10

Hi @SFI_AUS,

While coming from the other page, it immediately goes to the section and it takes time to set the Header sticky and Shrink Amount to act. And there is no specific solution as you are using the One Page Navigation link from another page. You will not face this if you are in the same page where the sections are already present.

NOTE: The value for the Trigger Offset is not required in your case.

Thanks

#11

Hi, I’m now noticing that my anchor menu is not working in Safari (Mac)

And I also tried this persons site https://www.savantwms.com/additional-modules/#Kitting-WIP who posted links in this thread:
Scroll-margin-top

their anchor links are not working in Safari either. Do you know whats causing this?

#12

Hi @SFI_AUS,

I have checked your website in the Online Browser Tool in Safari but didn’t find any issue. I would suggest you please provide the device name, browser & operating system version you are using, along with any video that helps us to recognize the problem.

Thanks

#13

Hi @tristup,
Sorry, ive realised that you are looking at our Staging site. The problem is was only on our Prod site. But ive fixed it now.
thanks anyway

#14

Hi @SFI_AUS,

Glad to know that you are able to resolve the issue.

Thanks

#15

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