Navigation Links Appending to Current URL Path Instead of Navigating to Root-Level Pages in MegaMenu

[Daremonic]

I’m developing a website using this template. In my mega menu, I have a list of services defined as follows:

export const servicesData = [
{
title: "Explore Advice and Explanations",
description: "Dive deep into helpful guides and explanations for all of ScrewFast's features",
icon: "guides",
url: "page-1",
},
{
title: "Discover Integrations",
description: "Supercharge Your Workflow. Seamless integrations with all your favorite tools",
icon: "puzzle",
url: "page-2",
},
// ... other services
];

When I click on a service link while on the megamenu, the navigation works correctly, taking me to http://localhost:4321/page-1. However, if I’m on http://localhost:4321/page-1 and click on the “Discover Integrations” link, it navigates to http://localhost:4321/page-2/page-1 instead of http://localhost:4321/page-2, resulting in a “Page Not Found” error.

How can I modify my URLs to ensure that each link navigates to the correct root-level page regardless of the current URL? Is adding a leading slash to each url the appropriate solution, or is there a better practice for handling megamenu navigation?

[mearashadowfax]

Hi @Daremonic! Thank you for bringing this to our attention. The issue was that the language picker was trying to be too clever with path manipulation, which interfered with normal navigation. You can copy-paste the updated script from LanguagePicker and the MegaMenu should work properly.

[Daremonic]

Thanks for the support.