Like the title says: when clicking on anchor links on mobile using a sticky header, the element where it’s scrolling to, disappears behind the sticky header. I have debugged this and found out that in avia.js this rule is responsible for this behavior:
if( isMobile ) {
fixedMainPadding = 0;
}
Why is this?
Commenting this out, results in the expected behavior: it successfully scrolls until the sticky header.
Hey roelvanleuken,
Thank you for the inquiry.
The sticky header option should be disabled on mobile devices by default. Did you modify the header on mobile view?
Best regards,
Ismael
Yes, we did modify it through CSS. Is it possible to change the behavior of the scroll somehow on mobile? We want to use the sticky header on mobile on several websites. Perhaps you can check in your code (javascript) if the header has a position:fixed and change the offset for the scroll.
Hi,
Thank you for the update.
Why do you need a sticky header on mobile view? Users can easily return to the navigation by double-tapping the top edge of their phone, making sticky headers unnecessary. Unfortunately, implementing this requires modifications that are beyond the scope of support. Please hire a freelance developer or contact our partner, Codeable.
// https://kriesi.at/contact/customization
Best regards,
Ismael