Disabling link in navigation with localization sub-folder settings

[yaltug]

We can disable link in navigation with anchor "#".  However, when someone with localized market sub-folders clicks that link, link redirects to home page. Is there a solution for that? 

For example, we can create # link in navigation. If someone clicks that link from mysite.com/pages/something, link is disabled (mysite.com/pages/something#). However, if user clicks link from mysite.com/en-us/pages/something, link is redirecting homepage (mysite.com/en-us#)

[thescriptflow]

Hey @yaltug I hope you are doing well.

Great question — this issue happens because when you're using a "#" as the href in your Shopify navigation, it behaves slightly differently in localized subfolders (like /en-us/, /de/, etc.).

When a user clicks a # link on /en-us/pages/something, the browser interprets /en-us# as the new URL, which may not resolve correctly and end up redirecting to the localized homepage.

Solution:

Instead of Using the # consider using javascript:void(0) like 

<a href="javascript&colon;void(0)">About Us</a>

In this way your link will not redirect to homepage even you are on another page.

[yaltug]

Hi @thescriptflow.  Thank you for your answer.

javascript:void(0) can be a solution. However, it doesn't fit Shopify workflow. User might change menu in Content> Menu options but that menu doesn't accept javascript:void(0) as possible entry.

As a solution;  

I checked and removed localization root url if anchor exist. 

<a href="{% if localization.language.root_url != "/" and link.url contains "#" %} {{ link.url | remove_first: localization.language.root_url }} {% else %}{{ link.url }} {% endif %}"><span>{{ link.title }}</span></a>

I used this one as quick fix, and it covers my current need. If there is a better solution, I am open to it.