Hi, slightly struggling with menu highlighting.
From the docs section on menus, I’ve got the basics working but I have an edge-case that is a little annoying. Hoping for help to fix.
If you look at my live site: https://it.knightnet.org.uk/kb/
You can see that I have a knowledge base section. The site menu labelled “Knowledgebase” points to the index page and then there are sub-menus for the sub-sections of the knowledgebase.
That all works. However:
- When pointing at the
/kb/
index page, I would like ONLY the main menu item to be highlighted. Currently the main menu and all the sub-menu items are highlighted. - When I am pointed at a subsection, say
/kb/nr-qa/
, I would like both the root menu and the sub-menu to be highlighted but not all of the other sub-menus as is currently happening.
The menu code is as follows:
<div id="navMenu" class="navbar-menu">
{{ $currentPage := . }}
{{/* Render menu with single sub-menu (optional) */}}
{{ range .Site.Menus.main }}
{{ if .HasChildren }} {{/* If a menu has child items ... */}}
<div class="navbar-item has-dropdown is-hoverable {{ if (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}has-text-weight-bold{{ end }}" aria-haspopup="true">
<a href="{{.URL | default '#'}}" class="navbar-link">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
<div class="navbar-dropdown is-boxed">
{{ range .Children }}
{{/* Check for menu items named like "---- 1", etc and turn into HR's */}}
{{if eq (substr .Name 0 5) "---- " }}
<hr />
{{else}}
<a href="{{ .URL }}" class="navbar-item {{ if $currentPage.IsMenuCurrent "main" . }}has-text-weight-bold{{ end }}">
{{ .Name }}
</a>
{{end}}
{{ end }}
</div>
</div>
{{else}} {{/*Plain menu item (no children) */}}
{{if eq (substr .Name 0 5) "---- " }}
<hr />
{{else}}
<a href="{{.URL}}" class="navbar-item {{ if $currentPage.IsMenuCurrent "main" . }}has-text-weight-bold{{ end }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
{{end}}{{end}}
{{end}}
</div>