I’m trying to set a class="active"
attribute on the appropriate navbar item on each of my pages, so I can style accordingly.
In the frontmatter of each page, I set a .param section="XXXX"
My navbar code is like this [simplified for clarity]:
<nav id="navbar">
<ul>
<li class="navbarbutton {{ if eq .Params.section "index"}}active{{end}}"><a href="/">HOME</a></li>
<li class="navbarbutton {{ if eq .Params.section "services"}}active{{end}}" ><a href="/services">SERVICES</a></li>
<li class="navbarbutton {{ if eq .Params.section "portfolio"}}active{{end}}" ><a href="/portfolio">PORTFOLIO</a></li>
<li class="navbarbutton {{ if eq .Params.section "downloads"}}active{{end}}" ><a href="/downloads">DOWNLOADS</a></li>
... etc...
</ul>
</nav>
It works fine. The active
class gets added as appropriate on every page –except for the homepage.
I know that the homepage is treated slightly differently with regards things like templating, etc. So I’m wondering if that has anything to do with it? Does the homepage access .params differently too?