Anchor tags in nav not working in main nav. Sense theme, Gempages.

Shopify Discussion
1

Anchor tags in nav not working. System changes “href” to “data-target” when #'s are used, not sure if that is part of the cause of the problem.

On this page: https://sunshieldplus.com/, you can see the Ingredients link has a “data-target” with the URL and #sectionID, standard anchor tag link added to the menu item. But it does not work.

Please help!

Tyler

2

Hello @tbenari ,

Make the data-target/href conditional

For homepage your value should be “#shopify-section-sections–16134179586134__newsletter”

and for inner pages it should be “shop-domain/#shopify-section-sections–16134179586134__newsletter”
There is no other issue in it.

Regards
Guleria

3

Thanks for your answer, though, unfortunately, your recommendation does not fix the issue. The need here may have been clouded by my use of the footer as my example URL for the nav item.

The need is to have the “Ingredients” nav item send users to the “Ingredients” section of the homepage (section id=“gwpa9lOXbK”) from wherever they are on the site (not just when they are on the homepage, as its the global navigation).

How can I make it so the main navigation item sends users to a specific section of the homepage, even if they are coming from another page of the site? Perhaps I just don’t understand what you meant by “make the data-target/href conditional”?

4

Can you share what you tried with the recommendations I shared?

If you make this navigation conditional it will work 100% btw I’m not sure how good you are with code because without that you cannot implement it.

And with data-target conditional I meant

For homepage data-target should be “#shopify-section-sections–16134179586134__newsletter”

and for inner pages it should be “shop-domain/#shopify-section-sections–16134179586134__newsletter”

5

Hmmm.. I was able to add Javascript to make the URL for nav items conditional based on the page the user is on, for both desktop and mobile navs.

But, for good usability, I need there to be a consistent animation of the page moving down to the intended section so the user knows they are still on the homepage. Can anyone help?

Any help there?

6

Yes please follow the example
https://css-tricks.com/snippets/jquery/smooth-scrolling/