I want to add the active class to my navigation. It works fine when I stay on the index page. But it won’t work for other pages. I’ve tried to add a debug option, but the nav is rendering as it should, so I won’t get a debug output. I checked it in both languages. The active class just appears on the Index.

HTML

<header class="header">
    <div class="header-container">
        <a href="/" class="header-logo">
            <img src="/images/logo.png" alt="Logo">
        </a>
        <nav class="header-nav">
            {{ $currentPage := . }}
            {{ range .Site.Menus.main }}
                {{ $menu_item_url := .URL | relLangURL }}
                {{ $page_url := $currentPage.RelPermalink | relLangURL }}
                {{ if eq $menu_item_url $page_url }}
                    <a href="{{ $menu_item_url }}" class="header-nav-link active">{{ .Name }}</a>
                {{ else }}
                    <a href="{{ $menu_item_url }}" class="header-nav-link">{{ .Name }}</a>
                {{ end }}
            {{ end }}
        </nav>
    </div>
</header>

hugo.toml

baseURL = '/'
languageCode = 'de-DE'
title = 'Website'
defaultContentLanguage = "de"
defaultContentLanguageInSubdir = true

[languages]
    [languages.de]
            languageName = "Deutsch"
            weight = 1
            contentDir = "content/german"
            [languages.de.menus]
                [[languages.de.menus.main]]
                identifier = "page"
                    name = "page"
                url = "/"
                weight = 10
                [[languages.de.menus.main]]
                identifier = "about"
                    name = "Über uns"
                url = "/de/about"
                weight = 20
                [[languages.de.menus.main]]
                identifier = "products"
                    name = "Weitere Produkte"
                url = "/de/products"
                weight = 30
                [[languages.de.menus.main]]
                identifier = "contact"
                    name = "Kontakt"
                url = "/de/contact"
                weight = 40
                [[languages.de.menus.main]]
                identifier = "career"
                    name = "Karriere"
                url = "/de/career"
                weight = 50
                [[languages.de.menus.main]]
                identifier = "faq"
                    name = "FAQ"
                url = "/de/faq"
                weight = 60
    [languages.en]
            languageName = "English"
            weight = 2
            contentDir = "content/english"
            [languages.en.menus]
                [[languages.en.menus.main]]
                identifier = "index"
                    name = "index"
                url = "/"
                weight = 10
                [[languages.en.menus.main]]
                identifier = "about"
                    name = "About us"
                url = "/en/about"
                weight = 20
                [[languages.en.menus.main]]
                identifier = "products"
                    name = "Other products"
                url = "/en/products"
                weight = 30
                [[languages.en.menus.main]]
                identifier = "contact"
                    name = "Contact"
                url = "/en/contact"
                weight = 40
                [[languages.en.menus.main]]
                identifier = "career"
                    name = "Career"
                url = "/en/career"
                weight = 50
                [[languages.en.menus.main]]
                identifier = "faq"
                    name = "FAQ"
                url = "/en/faq"
                weight = 60
[markup]
    defaultMarkdownHandler = 'goldmark'
    [markup.goldmark]
            [markup.goldmark.renderer]
                unsafe = true
        [markup.highlight]
                style = "monokai"