Motivation
The original navbar in words took up half of the horizontal spaces of the viewport. I couldn’t add new items like “Tags” to display the tag list.
Work
Thanks to the pre field in Hugo Menus, one can easily add the icon
as an HTML element by some editing on the template file.
{{ range .Site.Menus.main.ByWeight }}
{{ if .HasChildren }}
<li class="navlinks-container">
{{ if .Pre }}
<a class="navlinks-parent" title="{{ .Name }}">{{ .Pre }}</a>
{{ else }}
<a class="navlinks-parent">{{ .Name }}</a>
{{ end }}
<div class="navlinks-children">
{{ range .Children }}
{{ if .Pre }}
<a title="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Pre }}</a>
{{ else }}
<a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
{{ end }}
{{ end }}
</div>
</li>
{{ else }}
<li>
{{ if .Pre }}
<a title="{{ .Name }}" href="{{ .URL | relLangURL }}">{{ .Pre }}</a>
{{ else }}
<a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
{{ end }}
</li>
{{ end }}
{{ end }}