"active" code on header not working

support
1

Hello
I need the “active” class to appear when it is on page. Please help.

Header:

<ul class="header-nav">
  {{ $currentPage := . }}
  {{ range .Site.Menus.main -}}
    <li class='header-nav__list-item {{ if $currentPage.IsMenuCurrent "main" . }} active {{ end }}'>
      <a class="header-nav__list-link" href="{{ .URL | absLangURL }}">{{ .Name }}</a>
    </li>
  {{ end }}
</ul>

Config file:

[languages.en]
contentDir = 'content/english'
description = 'Kaliriu in English'
languageCode = 'en-US'
languageName = 'English'
weight = 1

[[languages.en.menu.main]]
identifier = 'home'
name = 'Home'
pageRef = '/'
weight = 1

[[languages.en.menu.main]]
identifier = 'projects'
name = 'Projects'
url = '/projects'
weight = 2

[[languages.en.menu.main]]
identifier = 'blog'
name = 'Blog'
url = '/blog'
weight = 3

[[languages.en.menu.main]]
identifier = 'contact'
name = 'Contact'
url = '/contact'
weight = 4

[languages.es]
contentDir = 'content/spanish'
description = 'Kaliriu en Español'
languageCode = 'es-ES'
languageName = 'Español'
weight = 2

[[languages.es.menu.main]]
identifier = 'inicio'
name = 'Inicio'
pageRef = '/'
weight = 1

[[languages.es.menu.main]]
identifier = 'proyectos'
name = 'Proyectos'
url = '/es/projects'
weight = 1

[[languages.es.menu.main]]
identifier = 'blog'
name = 'Blog'
url = '/es/blog'
weight = 2

[[languages.es.menu.main]]
identifier = 'contacto'
name = 'Contacto'
url = '/es/contact'
weight = 3
2

First, when defining a menu structure in site configuration, use pageRef for internal pages, and url for external pages.

Second, do not include the language prefix in the pageRef value.

Your site configuration should look like this:

[languages.en]
contentDir = 'content/english'
description = 'Kaliriu in English'
languageCode = 'en-US'
languageName = 'English'
weight = 1

[[languages.en.menu.main]]
identifier = 'home'
name = 'Home'
pageRef = '/'
weight = 1

[[languages.en.menu.main]]
identifier = 'projects'
name = 'Projects'
pageRef = '/projects'
weight = 2

[[languages.en.menu.main]]
identifier = 'blog'
name = 'Blog'
pageRef = '/blog'
weight = 3

[[languages.en.menu.main]]
identifier = 'contact'
name = 'Contact'
pageRef = '/contact'
weight = 4

[languages.es]
contentDir = 'content/spanish'
description = 'Kaliriu en Español'
languageCode = 'es-ES'
languageName = 'Español'
weight = 2

[[languages.es.menu.main]]
identifier = 'inicio'
name = 'Inicio'
pageRef = '/'
weight = 1

[[languages.es.menu.main]]
identifier = 'proyectos'
name = 'Proyectos'
pageRef = '/projects'
weight = 2

[[languages.es.menu.main]]
identifier = 'blog'
name = 'Blog'
pageRef = '/blog'
weight = 3

[[languages.es.menu.main]]
identifier = 'contacto'
name = 'Contacto'
pageRef = '/contact'
weight = 4
1 Like
3

When I use PageRef instead of URL the header links stop working altogether… and the active class does not appear either even if just the homepage…

4

Then you are doing something wrong. Try it:

git clone --single-branch -b hugo-forum-topic-38727 https://github.com/jmooring/hugo-testing hugo-forum-topic-38727
cd hugo-forum-topic-38727
hugo server
5

Here you go

6

The pageRef menu property was introduced in v0.86.0. It looks like you are building the site with v0.81.0, which was released over a year ago.

To do…

1) Upgrade to the latest version.

2) Remove this line from config.toml. It doesn’t do anything.

metaDataFormat = "yaml"

3) Move this from config.toml to netlify.toml:

[build]
command = "hugo --gc --minify"
publish = "public"
[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"
[context.branch-deploy.environment]
HUGO_VERSION = "0.96.0"
[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"
[context.deploy-preview.environment]
HUGO_VERSION = "0.96.0"
[context.next.environment]
HUGO_ENABLEGITINFO = "true"
[context.production.environment]
HUGO_ENABLEGITINFO = "true"
HUGO_ENV = "production"
HUGO_VERSION = "0.81.0"
[context.split1]
command = "hugo --gc --minify --enableGitInfo"
[context.split1.environment]
HUGO_ENV = "production"
HUGO_VERSION = "0.81.0"
7

I used this method to update my hugo site:

I don’t think it actually worked though… by checking the hugo version on the terminal, it says it is v0.78.1

Is there a better way to do it?

8

Fix your netlify.toml file.

9

You mean step 2 and step 3? From your instructions? I did those already :grin:

10

Go through the file, line by line, and adjust the version.

11

Thank you so much. Everything works now

12

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