Adding active class issue

i v read a lot of forums topics on this, but still cant figure this one out.

so i simply want to add and an “active” class to a nav bar menu if i m on the corresponding page.
i ended up using this code:

<ul class="menu__list">
{{- if .Site.Menus.main }}
{{- $currentNode := . }}
{{- range .Site.Menus.main }}
{{- if .Name }} 
<li class="menu__item {{ if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }}active{{ end }}">
 <a class="menu__link" href="{{ .URL }}">
  <span class="menu__text">{{.Name }}</span>
{{- end }}
{{- end }}
{{- end }}

here is a part of my config file:

        identifier = "home"
        name = "Home page"
        url = "/"
        pageRef= "/"
        weight = 1

        identifier = "connect"
        name = "How to connect"
        url = "/how-to-connect"
        pageRef= "how-to-connect"
        weight = 2

        identifier = "reg"
        name = "Create account"
        pageRef= "create-account"
        url = "/create-account"
        weight = 3

my main concern is that it works just fine when i run it locally, i get the “active” class on all the menus.
however, when i push it to the web hosting, i only get the “active” class on my home page.

i v read this to find out about the refPage so i added it
i also saw this this so i tried to remove the “url”, it didnt work out

thanks in advance for any help

1 Like

What version are you running locally?

What version are you running when the site is built remotely?


this is it! i should’v figured it out by myself. Thank you so much!

i have the latest HUGO version:

kirill@kirill-mint:~/Documents/github/project$ hugo version
hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended linux/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=snap:0.109.0

i pushed my project to Cloudflare Pages and i was sure they had the latest version, but it turns out they provide 0.54.0 by default:

Problem was solved by specifying HUGO version in environment variables:

thanks again. issue can be closed.

The pageRef menu entry property was introduced in v0.86.0. Also:

  • When creating menu entries in site configuration, use pageRef for internal pages, and use url for external pages. Do not specify both.
  • You can omit the identifier property unless two or more entries in a given language have the same name property.
1 Like

yeah i get it now. earlier on i tried removing the url but it didn’t work out and now it does. must be the version issue as well.

i see. i thought it was necessary in case i have a page in multiple languages. turns out this can be removed

thanks again for helping! Legend!

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