I've encountered an issue with locale routing in my SvelteKit website. While I've successfully set up a Danish locale (/da-dk), the header navigation remains in English even when browsing Danish pages. For example, when visiting /da-dk/omkring, the page content displays correctly in Danish, but the header stays in English, making it impossible to navigate between Danish pages. I followed this tutorial SvelteKit Prismic i18n - StackBlitz.
Hi Team,
Welcome to the community 
It sounds like your header navigation may not be dynamically adapting to the locale set in the route. Here are some steps to troubleshoot and potentially resolve this issue:
-
Check Locale in SvelteKit Router: Ensure that the locale (da-dk) is being detected in the router or layout component that wraps your header. You can retrieve the locale from the route parameters or session and pass it to the header component.
-
Update Header Component for Locale: If your header links are hard-coded or not locale-aware, update them to use the current locale. For example, create a function that generates URLs based on the active locale so that navigation links dynamically adjust based on the route.
-
Prismic Query for Translations: If the header navigation labels (like “Home,” “About,” etc.) are stored in Prismic, make sure to query the translated content for the current locale (da-dk). Ensure that your Prismic API calls include the lang parameter, like lang=da-dk.
-
Dynamic Svelte Store: If the header should update as you switch locales, consider using a Svelte store to manage the active locale across the site. Update the header whenever the locale changes.
-
Verify i18n Library Configuration: If you’re using an i18n library, confirm that it’s initialized correctly to detect and apply da-dk as the active locale.
If any part of this setup needs further elaboration, let me know, and we can dive deeper into specific code or configuration details.