hugo-sustain/layouts/partials/header.html

<div class="container mb-3">
  <nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
      <a class="navbar-brand" href="{{ .Site.BaseURL }}">
        <i class="fa fa-home"></i>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar">
        <i class="fa fa-bars"></i>
      </button>

      <div id="navbar" class="collapse navbar-collapse">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          {{ if .Site.Menus.main }}
            {{ range .Site.Menus.main }}
              <li class="nav-item">
                <li><a class="nav-link" href="{{ .URL }}">{{ .Name | upper }}</a></li>
              </li>
            {{ end }}
          {{ end }}
        </ul>
      </div>
    </div>
  </div>
</nav>