I’m completely reorganizing my Hugo site, and as part of that, I’ve created 3 separate menus. There is a main homepage with nothing but a header, and the main menu navigation bar is on that page. When you click on either “tutoring” or “academic” on the main menu, you’re taken to a secondary homepage with its own menu and navigation bar.
I created partials called tutoring-navigation.html and academic-navigation.html and referenced them in the header files for both subdirectories. In these partials, I copied the site-navigation.html partial, and replaced .Site.Menus.main with .Site.Menus.tutoring and .Site.Menus.academic. The content of these navigation bars is exactly what I want and the links work, but the formatting is completely different than the formatting for the site-navigation bar. I didn’t change anything other than .Site.Menus.main. But they’re in the middle of the screen instead of in the corners, and the formatting looks horrible on mobile.
Here is my theme: GitHub - theNewDynamic/gohugo-theme-ananke: Ananke: A theme for Hugo Sites
I haven’t pushed any of these changes so my repository probably isn’t relevant, but here it is anyway: GitHub - skhelmbrecht/skhelmbrecht.github.io
Info: here is how the main menu looks:
And here is how the tutoring menu looks:
Here’s the code for the main menu:
<nav class="pv3 ph3 ph4-ns" role="navigation">
<div class="flex-l justify-between items-center center">
<a href="{{ .Site.Home.RelPermalink }}" class="f3 fw2 hover-white no-underline white-90 dib">
{{ with .Site.Params.site_logo }}
<img src="{{ relURL . }}" class="w100 mw5-ns" alt="{{ $.Site.Title }}" />
{{ else }}
{{ .Site.Title }}
{{ end }}
</a>
<div class="flex-l items-center">
{{ partial "i18nlist.html" . }}
{{ if .Site.Menus.main }}
<ul class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr0 ml3" "pl0 mr3" }}">
{{ range .Site.Menus.main }}
<li class="list f5 f4-ns fw4 dib {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
<a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ i18n "pageTitle" . }}">
{{ .Name }}
</a>
</li>
{{ end }}
</ul>
{{ end }}
{{ partialCached "social-follow.html" . }}
</div>
</div>
</nav>
And the code for the tutoring menu:
<nav class="pv3 ph3 ph4-ns" role="navigation">
<div class="flex-l justify-between items-center center">
<a href="{{ .Site.Home.RelPermalink }}" class="f3 fw2 hover-white no-underline white-90 dib">
{{ with .Site.Params.site_logo }}
<img src="{{ relURL . }}" class="w100 mw5-ns" alt="{{ $.Site.Title }}" />
{{ else }}
{{ .Site.Title }}
{{ end }}
</a>
<div class="flex-l items-center">
{{ partial "i18nlist.html" . }}
{{ if .Site.Menus.tutoring }}
<ul class="{{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr0 ml3" "pl0 mr3" }}">
{{ range .Site.Menus.tutoring }}
<li class="list f5 f4-ns fw4 dib {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3" "pr3" }}">
<a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ i18n "pageTitle" . }}">
{{ .Name }}
</a>
</li>
{{ end }}
</ul>
{{ end }}
{{ partialCached "social-follow.html" . }}
</div>
</div>
</nav>
When posting code, configuration, or data on this forum, please wrap the text within backticks or use the </> button in the menu.
```
my code
```
Okay thanks, I fixed that!
Please create a temporary branch with your changes. Looking at a stock theme doesn’t help, and guessing what you have done isn’t a great use of our time.
