Hugo Megakit theme | How to realise dropdown menu?

73 views Asked by At

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

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>
0

There are 0 answers