theme-blog-ewen/layouts/partials/header.html

<!-- navigation -->
<header class="navigation">
    <div class="container">
        

        <!-- navbar -->
        <nav class="navbar navbar-expand-lg navbar-white bg-transparent border-bottom pl-0">
            <input type="checkbox" id="navbar-toggle-cbox">

                
                <a class="navbar-brand" href="{{ .Site.BaseURL | relLangURL }}">
                    {{ .Site.Title }}
                </a>

                <label for="navbar-toggle-cbox" class="navbar-toggler collapsed" 
                    data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span><i class="fa-solid fa-ellipsis"></i></span>
                </label>
            
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav ms-auto">
                    {{ range .Site.Menus.main }}
                    {{ if .HasChildren }}
                    <div class="mydropdown">
                        <input type="checkbox" id="{{ .Name | urlize }}-toggle-cbox">
                        <label for="{{ .Name | urlize }}-toggle-cbox" class="mydropdown-toggler collapsed"
                            data-toggle="collapse" data-target="#{{ .Name | urlize }}-dropdown"
                            aria-expanded="false" aria-controls="{{ .Name | urlize }}-dropdown">
                            <li>
                                <a class="nav-link">
                                 {{ .Name }}
                                </a>
                            </li>
                        </label>
                        
                        <div id="{{ .Name | urlize }}-dropdown" class="collapse">
                            <ul class="mydropdown-menu">
                                {{ range .Children }}
                                <li>
                                    <a href="{{ .URL | absURL }}">{{ .Name }}</a>
                                </li>
                                {{ end }}
                            </ul>
                        </div>
                    </div>

                    {{ else }}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ .URL | absURL }}">{{ .Name }}</a>
                    </li>
                    {{ end }}
                    {{ end }}
                    
                    {{- if .IsTranslated -}}
                    <div class="mydropdown">
                        <input type="checkbox" id="lang-toggle-cbox">
                        <label for="lang-toggle-cbox" class="mydropdown-toggler collapsed" 
                            data-toggle="collapse" data-target="#lang-dropdown"
                            aria-expanded="false" aria-controls="lang-dropdown">
                            <li class="">
                                <a class="nav-link"><img class="flag grayscale-60" src="/img/flag_{{- .Lang -}}.svg"></a>
                            </li>
                        </label>

                        <div id="lang-dropdown" class="collapse">
                            <ul class="mydropdown-menu">
                                {{- range .AllTranslations -}}
                                <li><a href="{{- .Permalink -}}"><img class="flag" src="/img/flag_{{- .Lang -}}.svg"></a></li>
                                {{- end -}}
                            </ul>
                        </div>
                    </div>
                    {{- end -}}

                </ul>
        </div>
        </nav>

    </div>
</header>