Language switch in header doesn't work correct in footer

support
1

I can’t get the language switch to work properly from the footer. If I change after start e.g. from English to German, the language in the footer is also changed correctly. The pages are displayed correctly. If I have e.g. the page impressum (German) active, then the language in the header can not be set back to English. The corresponding link in the header is missing.

header.html


<nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm fixed-top">
	<div class="container">
		<a class="navbar-brand d-lg-none" href="/">{{ .Site.Title }}</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav me-auto mb-2 mb-lg-0">
				{{ range .Site.Menus.main }}
				{{ if .HasChildren }}
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle{{ if $.HasMenuCurrent " main" . }} active{{ end }}" href="#"
						role="button" data-bs-toggle="dropdown" aria-expanded="false">
						{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
					</a>
					<ul class="dropdown-menu">
						{{ range .Children }}
						{{ if eq .Params.divider true }}
						<li>
							<hr class="dropdown-divider">
						</li>
						{{ else }}
						<li>
							<a class="dropdown-item{{ if $.IsMenuCurrent " main" . }} active"
								aria-current="page{{ end }}" href="{{ .URL }}">
								{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
							</a>
						</li>
						{{ end }}
						{{ end }}
					</ul>
				</li>
				{{ else }}
				<li class="nav-item">
					<a class="nav-link{{ if $.IsMenuCurrent " main" . }} active" aria-current="page{{ end }}"
						href="{{ .URL }}">
						{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
					</a>
				</li>
				{{ end }}
				{{ end }}
				<li class="nav-item dropdown">
					<button class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
						<img src="/images/lang.svg" alt="Language">
					</button>
					<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropLanguages">
						{{ range $.AllTranslations }}
						<li><a class='dropdown-item {{ if eq .Lang $.Lang }} active {{ end }}'
								href='{{ .RelPermalink }}' hreflang="{{ $.Lang }}"> {{ .Language.LanguageName }} </a>
						</li>
						{{ end }}
					</ul>
			</ul>
			<a class="navbar-brand d-none d-lg-block" href="/">{{ .Site.Title }}<img src="/images/logo.jpg" class="logo"
					alt="{{ .Site.Title }}"></a>
		</div>
	</div>
</nav>

footer.html


<footer class="container-fluid bg-dark py-2">
	<div class="container">
		<div class="d-flex flex-wrap justify-content-between align-items-center">
			<span class="text-white mb-0">
				{{- with .Site.Params.footer | markdownify -}}
				{{- . -}}
				{{- else -}}
				&copy; <span id="year"><noscript>{{ now.Format "2006"}}</noscript></span> {{ .Site.Copyright | default
				.Site.Title }}
				{{- end -}}
			</span>
			<ul class="nav col-md-auto justify-content-end">
				{{ range .Site.Menus.footer -}}
				<li class="nav-item"><a href="{{ .URL }}" class="nav-link px-3 text-white">{{ .Name }}</a></li>
				{{ end -}}
			</ul>
		</div>
	</div>
</footer>
<script>
	document.getElementById("year").innerHTML = new Date().getFullYear();
</script>
2

Without your repo (preferably) or a link to the site? Not possible to say.

Btw: what is this one line script in footer supposed to do?

4

Tx, but that’s a bit much for me. No Go installed here, and I’m not going to do that now. I’m confident someone else will have a look.

5

This has nothing to do with your language switcher. With the exception of the company page, there is no logical relationship between translations.

Your content directory:

content/
├── de/
│   ├── _index.md
│   ├── company.md
│   ├── impressum.md            <-- this page doesn't know that "imprint" is its translation
│   ├── rechtliche.hinweise.md  <-- same problem
│   └── sicherheit.md           <-- same problem
└── en/
    ├── _index.md
    ├── company.md
    ├── imprint.md
    ├── legal-notice.md
    └── security.md

To establish a relationship between two pages, either (a) use the same file name, or (b) set the translationKey in front matter. If I were you, I would use the same file name, then set “slug” in front matter.

1 Like
6

Thank you for the help. It works fine.

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.