Named Anchor Positioning

Support
#1

Hello X Team,
On my eCommerce site, on the home page I’m linking images and Shop Now buttons (green box areas on this page - http://klean.bluetroop.com/) to named anchor sections on the Products page here - http://klean.bluetroop.com/kea-products/.

The problem is that the name anchor (attached to the custom header of the section) gets tucked under the nav bar when the users clicks to it on the Products page and then they cannot see it. How do I correct it so the named anchor section is visible when the user clicks over to the page?

Thank you in advance.

#2

Hi there,

Thanks for writing in.

That’s because the header is floating, and normally, anchor name is always positioned on the very top (zero) position, right under the browser’s address bar.

To have that feature (including the header position in anchor’s offset), then please add this code to your global custom javascript.

Please note that we don’t provide support for this kind of customization, but since this is a snippet and working on my end, then here it is

jQuery( function(  $ ){

$(window).load( function() {

if ( window.location.pathname == '/kea-products/' ) {

$('html, body').scrollTop( $( window.location.hash.replace('/', '') ).parent().offset().top - ( $('.x-navbar').height() ) );

}

} );

} );

You may enhance it further, but we can’t provide further customization on this code.

Thanks!

#3

This works with the drop down sub menu but not with the image and Shop Now buttons on the home page. What else can we try please?

#4

Hi there,

It’s working when I tested it. The reason it’s not working now, is because you changed your links from this /kea-products/#wet/ to this /kea-products#wet/ and it’s not really going to work. Please correct your products URL again.

Thanks!

#5

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