Highlighting a single sub-menu item?

support
1

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>
2

I am interesting in solving this problem. Can you create an ultra-light all-inclusive site like this so that it’s easy to just clone and start hacking at it.

3

My current project is using bulma, and I am using .is-active to get the highlighting, but, I had to add css to get it to do exactly what I wanted. Looking at the inspector while in your site, something else in css is giving those surrounding menu entries a heavy font weight, even before you are adding has-text-weight-bold with your conditional.

Also this “has or is” {{ if (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}has-text-weight-bold{{ end }} is putting that class no matter what, so, the children might be inheriting their weight from it.

For what it’s worth, here’s examples from my totally WIP site. The sidebar menu for inner pages:

The customized css around the highlighted line:

4

Thanks both. I will have a look at this as soon as I can. I will also try to create a test site - I need to do that anyway really now that my main site is live.