Adding third sub-menu fails

support
1

I have a Hugo-based site here.
Mousing over the top menu items, “GICs” and “About” reveals sub-menus.
Here is the relevant part of the config.toml code for that.

# Sub-menus for "About" and "GIC" work OK
[menu]
    [[menu.nav]]
        name    = "Home"
        url     = "/"
        weight  = -10
        
    [[menu.nav]]
        name    = "High-Interest Savings"
        url     = "/his/"
        weight  = -9
        
    [[menu.nav]]
        name    = "GICs"
        url     = ""
        weight  = -6
    
    [[menu.nav]]
        name    = "Rates"
        url     = "/gics/"
        parent  = "GICs"
        weight  = -5
        
    [[menu.nav]]
        name    = "Trends"
        url     = "/gic_trends/"
        parent  = "GICs"
        weight  = -4

    [[menu.nav]]
        name    = "About"
        url     = ""
        weight  = -3

    [[menu.nav]]
        name    = "What is WhatBank?"
        url     = "/about/"
        parent  = "About"
        weight  = -2

    [[menu.nav]]
        name    = "Contact"
        url     = "/contact/"
        parent  = "About"
        weight  = -1

    [[menu.nav]]
        name    = "Terms of Use"
        url     = "/tou/"
        parent  = "About"
        weight  = 1

    [[menu.nav]]
        name    = "Privacy Policy"
        url     = "/privacy/"
        parent  = "About"
        weight  = 2

I want to add the same kind of sub-menu that I added to “GICs” (ie “Rates” and “Trend”) to “High-Interest Savings”. When I try, no sub-menu appears and the link points to the home page instead of to, “/his/”.

Why is this?

Here is my attempt:

# Sub-menus for "About" and "GIC" still work
# Sub-menu for "High-Interest Savings" does not work. Link now points to "Home"

[menu]
    [[menu.nav]]
        name    = "Home"
        url     = "/"
        weight  = -12
        
    [[menu.nav]]
        name    = "High-Interest Savings"
        url     = ""
        weight  = -11
        
    [[menu.nav]]
        name    = "Rates"
        url     = "/his/"
        parent  = "High-Interest Savings"
        weight  = -10
        
    [[menu.nav]]
        name    = "Trends"
        url     = "/his_trends/"
        parent  = "High-Interest Savings"
        weight  = -9

    [[menu.nav]]
        name    = "GICs"
        url     = ""
        weight  = -8

    [[menu.nav]]
        name    = "Rates"
        url     = "/gics/"
        parent  = "GICs"
        weight  = -7
        
    [[menu.nav]]
        name    = "Trends"
        url     = "/gic_trends/"
        parent  = "GICs"
        weight  = -6
        
    [[menu.nav]]
        name    = "About"
        url     = ""
        weight  = -5

    [[menu.nav]]
        name    = "What is WhatBank?"
        url     = "/about/"
        parent  = "About"
        weight  = -4        

    [[menu.nav]]
        name    = "Contact"
        url     = "/contact/"
        parent  = "About"
        weight  = -3

    [[menu.nav]]
        name    = "Terms of Use"
        url     = "/tou/"
        parent  = "About"
        weight  = -2

    [[menu.nav]]
        name    = "Privacy Policy"
        url     = "/privacy/"
        parent  = "About"
        weight  = -1

If it helps, here is the header.html file.

<header class="header">
    <div class="container">
        <div class="header_cont">
            <nav class="header_nav">
                <li><a href="{{ .Site.BaseURL }}">
                    <img src = "{{ .Site.BaseURL }}images/logo.png" height="55px" width="236px"> 
                    </a>
                </li>
                <ul class="menu header_nav_menu">
                    {{ $page := . }}
                    
                    {{ range .Site.Menus.nav }}
                    {{ if .HasChildren }}
    
                    {{ $submenuActive := false }}
                    {{ range .Children }}
                        {{ if eq $page.URL .URL }}
                            {{ $submenuActive = true }}
                        {{ end }}
                    {{ end }}

                    <li class="dropdown-container">
                        <ul class="">
                            <li class="dropdown-button {{ if $submenuActive }}current-button{{ end }}">
                                <a href="#" class="Members underline-effect {{ if $submenuActive }}current-menu{{ end }}">
                                    <span>{{ .Pre }} {{ .Name }}</span>
                                </a>
                            </li>
                            <li class="dropdown-submenu {{ if $submenuActive }}current{{ end }}">
                                <ul>
                                {{ range .Children }}
                                    {{ $active := eq $page.URL .URL }}
                                    <li>
                                        <a href="{{ .URL | absLangURL }}" class="underline-effect {{ if $active }}current-submenu{{ end }}">
                                            <span>{{ .Pre }} {{ .Name }}</span>
                                        </a>
                                    </li>
                                    {{ end }}
                                </ul>
                            </li>    
                        </ul>
                    </li>
                    {{ else }}
                    {{ $active := eq $page.URL .URL }}
                    <li class="u-pull-right">
                        <a href="{{ .URL | absLangURL }}" class="Members underline-effect {{ if $active }}current-menu{{ end }}">
                            <span>{{ .Pre }} {{ .Name }}</span>
                        </a>
                    </li>
                    {{ end }}
                    {{ end }}
                </ul>
            </nav>
            <div class="hamburger hamburger--slider js-hamburger">
                <div class="hamburger-box">
                    <div class="hamburger-inner"></div>
                </div>
            </div>
        </div>
    </div>
</header>
2

try using identifier field for the parent,

    [[menu.nav]]
        name    = "Rates"
        url     = "/his/"
++      identifier = "high-interest-savings" 
        parent  = "High-Interest Savings"
        weight  = -10
        
    [[menu.nav]]
        name    = "Trends"
        url     = "/his_trends/"
++      parent  = "high-interest-savings" 
--      parent  = "High-Interest Savings"
        weight  = -9

I suspect because “High-Interest Savings” contains space, somehow hugo fails to use it as identifier.

TIP:
i always set identifier contains only lowercase/dash/underline for entry that has children. Because Name can contain anything (unicode/ascii/whitespace)

1 Like
3

Add identifier to the children as well: Menu entry variables | Hugo

.Identifier

string Value of the identifier key if set for the menu entry. This value must be unique for each menu entry. It is necessary to set a unique identifier manually if two or more menu entries have the same .Name .

1 Like
4

Thanks. This, plus the tip from @pointyfar did the trick.

5

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