I'm struggling to build my website with Hugo. Most of it is clear, but I can't figure out how to make a dropdown menu. I am using theme Megakit and I found another version here, which has some small features I like to incorporate.
Bonusquestion
- How do I get the 'get a quote' button in the navigation in the Hugo source?
Dropdown menu:
I searched around, but I found other structures for submenu's and they don't fit. I added main:
to the data/nav.yml earlier, but that wasn't enough. I tried to follow this guide, but it has a different structure. Since my navigation is not in my ../config.toml, I'm kind of stuck. I can imagine it is also an html & css issue. I have searched on StackO and found this, which gives me the same insights.
menu:
- name: "Menu Item 1"
url: "/menu_item_1/"
- name: "Menu Item 2"
url: "/menu_item_2/"
- name: "Menu Item 3"
url: "/menu_item_3/"
Location of the HTML is ../layouts/partials/nav.html and looks like this:
<nav class="navbar navbar-expand-lg px-0 py-4">
<a class="navbar-brand" href="/">
{{ .Site.Data.nav.logo.firstpart -}}<span> {{- .Site.Data.nav.logo.lastpart }}</span>
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample09"
aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navbarsExample09">
<ul class="navbar-nav ml-auto">
{{ $current := . }}
{{ range .Site.Data.nav.menu }}
<li class="nav-item {{ if eq $current.RelPermalink .url }}active{{ end }}">
<a class="nav-link" href="{{ .url }}" {{ if .open_in_new_tab }}target="_blank"{{ end }}>{{ .name }}</a>
</li>
{{ end }}
</ul>
</div>
</nav>