{% assign t = site.data.language.t %} <nav class=“header w-100 bg-primary d-flex flex-column”>

<div class="border-bottom" style="height: 65%;">
    <div class="m-auto content h-100 d-flex">
        <div class="logo user-select-none flex-none d-flex flex-column justify-content-center">
            <a class="fw-bold" href="{{ '/' | prepend: site.baseurl }}">
                {{ site.title }}
            </a>
        </div>
        <div class="search-box flex-auto d-flex flex-column justify-content-center d-sm-none">
            <form action="{{ '/search' | prepend: site.baseurl }}" id="header-search-form" class="search">
                <label class="search-wrap d-flex flex-none">
                    <input name="words" class="search-input flex-grow-1" id="header-search-input" type="text" />
                    <button class="search-button cursor-pointer bg-base" type="submit">
                        <i class="fas fa-arrow-right"></i>
                    </button>
                </label>
            </form>
        </div>
    </div>
</div>
<div class="nav-bar bg-primary">
    <div class="m-auto content">
        <div>
            <ul class="white-space-nowrap">
                <li class="d-inline-block active"><a href="{{ '/' | prepend: site.baseurl }}">{{ t.posts | default: 'posts' }}</a></li>
                {% for _page in site.morph.pages %}
                <li class="d-inline-block"><a href="{{ _page.path | prepend: site.baseurl }}">{{ _page.name }}</a></li>
                {% endfor %}
                <li class="d-inline-block"><a href="{{ '/about' | prepend: site.baseurl }}">{{ t.about_low | default: 'about' }}</a></li>
            </ul>
        </div>
    </div>
</div>

</nav>

<script>

var headerSearchForm = document.getElementById('header-search-form')
var headerSearchInput = document.getElementById('header-search-input')
headerSearchForm.onsubmit = function (event) {
    event.preventDefault()
    var words = headerSearchInput.value
    window.location.href = headerSearchForm.action + '?words=' + encodeURIComponent(words)
}

</script>