themes/apachecon/layouts/partials/nav.html

<nav id="nav" class="navbar navbar-expand-lg bg-transparent">
  <div class="container py-1">
    <div class="btn-wrap d-flex align-items-center justify-content-between">
        {{ if .IsHome }}
            <div class="navbar-brand">&nbsp;</div>
        {{ else}}
            <a href="index.html" class="navbar-brand">
                <img class="logo-img" src="images/2025-logo.png" height="120" width="200px" ALIGN=CENTER>
            </a>
        {{end}}
         <button
            onclick="changeMenuBg()"
            class="navbar-toggler" 
            type="button"
            data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
        <ul class="navbar-nav">
            {{ if .IsHome }}
                <div class="d-none">&nbsp;</div>
            {{ else}}
                <li class="nav-item">
                    <a class="nav-link" href="{{ if eq .Site.Language.Lang "zh" }}/zh/{{end}}index.html">
                        {{ i18n "home"}}
                    </a>
                </li>
            {{end}}
            
            {{ range .Site.Menus.main }}
                <li class="nav-item">
                    {{ .Pre }}
                    <a href="{{.URL}}" class="nav-link">{{ .Name }}</a>
                </li>
            {{end}}
            {{ if .IsTranslated }}
                {{ range .Translations }}
                    <li class="nav-item">
                        <a href="{{ .URL }}" class="nav-link" >{{ i18n "translation" }}</a>
                    </li>
                {{ end}}
            {{ end }}
            <!-- <div class="ms-0 ms-lg-4">
                <a href="{{ if eq .Site.Language.Lang "zh" }}/zh/{{end}}{{ if .IsHome }}#register{{else}}index.html#register{{end}}" role="button" class="btn btn-warning">
                    {{ i18n "register" }}
                </a>
            </div> -->
            
        </ul>
    </div>
  </div>
</nav>
<script>
    const isHome = "{{ .IsHome }}";
    function changeMenuBg () {
        const nav = document.getElementById('nav');
        if (isHome !== 'true') {
            return;
        }
        if (nav.classList.contains('bg-custom')) {
            nav.classList.remove('bg-custom');
            nav.classList.add('bg-transparent');
        } else {
            nav.classList.add('bg-custom');
            nav.classList.remove('bg-transparent');
        }
    }

</script>