"main" menu won't render twice (needed for responsive nav)

support
1

I’d like to put two instances of my main menu sitewide, so I can switch between traditional top navigation and a tab bar navigation via media queries. For some reason, the navigation items within the tab bar are not parsing, though the block shows up (I just get an empty ul):

I have Menu.main in config as:

[[menu.main]]
    identifier = "blog"
    icon = "icon-blog.html"
    name ="Writing"
    url = "/blog/"
    weight = 1

  [[menu.main]]
    identifier = "work"
    icon = "icon-work.html"
    name = "Work"
    url = "/work/"
    weight = 2

  [[menu.main]]
    identifier = "about"
    icon = "icon-about.html"
    name = "About"
    url = "/about/"
    weight = 3

BaseOf looks like this (where the first instance of the main menu is in a partial in the header:

<!doctype html>
<html lang="{{ .Site.LanguageCode | default "en" }}">
    <head>

        {{ block "site/meta" . }}{{ partial "site/meta.html" . }}{{ end }}

        <title>{{ block "title" . }}
            {{- with .Title }}{{ . }} | {{ end }}{{ .Site.Title -}}
        {{ end }}</title>

        {{ range .AlternativeOutputFormats }}
            <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
        {{ end }}

        {{ block "site/styles" . }}{{ partial "site/styles.html" . }}{{ end }}

    </head>
    <body>

        {{ block "header" . }}{{ partial "site/header.html" . }}{{ end }}

        {{ block "main" . }}{{ end }}
        {{ block "blog" . }}{{ end }}
        {{ block "work" . }}{{ end }}
        {{block "about" . }}{{ end }}

        {{ block "mobile-nav" . }}{{partial "site/mobile-nav.html" }}{{ end }}
        {{ block "footer" . }}{{ partial "site/footer.html" . }}{{ end }}

        {{ block "site/scripts" . }}{{ partial "site/scripts.html" . }}{{ end }}

    </body>
</html>

Main Nav (default, first in tag order, resides in {{ partial "site/header.html" . }} looks like this:

<nav class="main-menu" role="navigation">
  <ul>
    {{ $currentPage := . }} 
    {{ range .Site.Menus.main }}
    <li class="{{if or ($currentPage.IsMenuCurrent " main " .) ($currentPage.HasMenuCurrent "main " .) }} active{{end}}">
      <a href="{{.URL}}">
        <span>{{ .Name }}</span>
      </a>
    </li>
    {{ end }}
  </ul>
</nav>

Mobile Nav, which is called as a block in BaseOf looks like this:

<div class="tab-bar">
  <nav class="tab-bar-nav" role="navigation">
    <ul>
      {{ $currentPage := . }}
      {{ range .Site.Menus.main }}
      <li class="{{if or ($currentPage.IsMenuCurrent " main " .) ($currentPage.HasMenuCurrent "main " .) }} active{{end}}">
        <a href="{{.URL}}">
          <!--placeholder for custom icons defined in toml-->
          <span class="menu-icon">{{partial "icons/icon-twitter.html" }}</span>
          <span>{{ .Name }}</span>
        </a>
      </li>
      {{ end }}
    </ul>
  </nav>
</div>
2

Solved. Forgot the context dot in BaseOf:

Should be:

{{ block "mobile-nav" . }}{{partial "site/mobile-nav.html" .  }}{{ end }}

Now to figure out how to get my custom icon to show up in the template.

3

For those that are looking for a solution to the icon in a tab bar issue, here’s what I came up with:

<div class="tab-bar">
  <nav class="tab-bar-nav" role="navigation">
    <ul>
      {{ $mycurrentPage := . }}
      {{ range .Site.Menus.main }}
      {{ $icon := .Pre }}
      {{ $path := (printf "%s%s" "icons/" $icon ) }}
      <li class="{{if or ($mycurrentPage.IsMenuCurrent " main " .) ($mycurrentPage.HasMenuCurrent "main " .) }} active{{end}}">
        <a href="{{.URL}}">
          <span class="menu-icon">{{ partial $path . }}</span>
          <span>{{ .Name }}</span>
        </a>
      </li>
      {{ end }}
    </ul>
  </nav>
</div>

You need to use pre to set the value and printf to concatenate a string with the variable.