blowfish/layouts/partials/header/fixed.html

<div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 h-[120px] pl-[24px] pr-[24px] sbackdrop-blur-xl sshadown-2xl" style="z-index:100">
    <div id="menu-blur" class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div>
    <div class="relative max-w-[64rem] h-[100px] ml-auto mr-auto">
            <div style="padding-left:0;padding-right:0"
                class="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
                {{ if .Site.Params.Logo -}}
                {{ $logo := resources.Get .Site.Params.Logo }}
                {{ if $logo }}
                <div>
                    <a href="{{ "" | relLangURL }}" class="flex">
                        <span class="sr-only">{{ .Site.Title | markdownify | emojify }}</span>

                        <img src="{{ $logo.RelPermalink }}" width="{{ div $logo.Width 2 }}"
                            height="{{ div $logo.Height 2 }}"
                            class="max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom"
                            alt="{{ .Site.Title }}" />

                    </a>
                </div>
                {{ end }}
                {{- end }}
                <div class="flex flex-1 items-center justify-between">
                    <nav class="flex space-x-3">

                        <a href="{{ "" | relLangURL }}"
                            class="text-base font-medium text-gray-500 hover:text-gray-900">{{ .Site.Title | markdownify
                            | emojify }}</a>


                    </nav>
                    <div class="hidden md:flex items-center space-x-5 md:ml-12">

                        {{ if .Site.Menus.main }}
                        {{ range .Site.Menus.main }}
                        <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
                            ) }} target="_blank" {{ end }}
                            class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
                            {{ partial "icon.html" .Pre }}
                            {{ if and .Pre .Name }} &nbsp; {{ end }}
                            {{ .Name | markdownify | emojify }}
                        </a>
                        {{ end }}
                        {{ end }}

                        {{ partial "translations.html" . }}

                        {{ if .Site.Params.enableSearch | default false }}
                        <button id="search-button" class="text-base hover:text-primary-600 dark:hover:text-primary-400"
                            title="{{ i18n " search.open_button_title" }}">
                            {{ partial "icon.html" "search" }}
                        </button>
                        {{ end }}


                        {{/* Appearance switch */}}
                        {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
                        <div
                            class="{{ if .Site.Params.footer.showScrollToTop | default true -}} ltr:mr-14 rtl:ml-14 {{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400">
                            <button id="appearance-switcher" type="button">
                                <div class="flex items-center justify-center h-12 dark:hidden">
                                    {{ partial "icon.html" "moon" }}
                                </div>
                                <div class="items-center justify-center hidden h-12 dark:flex">
                                    {{ partial "icon.html" "sun" }}
                                </div>
                            </button>
                        </div>
                        {{ end }}

                    </div>
                    <div class="flex md:hidden items-center space-x-5 md:ml-12">

                        <span></span>

                        {{ partial "translations.html" . }}

                        {{ if .Site.Params.enableSearch | default false }}
                        <button id="search-button-mobile"
                            class="text-base hover:text-primary-600 dark:hover:text-primary-400" title="{{ i18n "search.open_button_title" }}">
                            {{ partial "icon.html" "search" }}
                        </button>
                        {{ end }}

                        {{/* Appearance switch */}}
                        {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
                        <button id="appearance-switcher-mobile" type="button" style="margin-right:5px">
                            <div class="flex items-center justify-center h-12 dark:hidden">
                                {{ partial "icon.html" "moon" }}
                            </div>
                            <div class="items-center justify-center hidden h-12 dark:flex">
                                {{ partial "icon.html" "sun" }}
                            </div>
                        </button>
                        {{ end }}

                    </div>
                </div>
                <div class="-my-2 -mr-2 md:hidden">

                    <label id="menu-button" for="menu-controller" class="block">
                        <input type="checkbox" id="menu-controller" class="hidden" />
                        <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
                            {{ partial "icon.html" "bars" }}
                        </div>
                        <div id="menu-wrapper" style="padding-top:25px;"
                            class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50">
                            <ul
                                class="flex movedown flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10">
                                <li class="mb-1">
                                    <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">{{
                                        partial
                                        "icon.html"
                                        "xmark" }}</span>
                                </li>

                                {{ if .Site.Menus.main }}
                                {{ range .Site.Menus.main }}
                                <li class="mb-1">
                                    <a {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
                                        target="_blank" {{ end }}
                                        class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2"
                                        href="{{ .URL }}" title="{{ .Title }}">
                                        {{ partial "icon.html" .Pre }}
                                        {{ if and .Pre .Name }} &nbsp; {{ end }}
                                        {{ .Name | markdownify | emojify }}
                                    </a>
                                </li>
                                {{ end }}
                                {{ end }}

                            </ul>
                        </div>
                    </label>
                </div>
            </div>
        </div>
</div>
<script>
    window.addEventListener('scroll', function (e) {
        var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        var background_blur = document.getElementById('menu-blur');
        background_blur.style.opacity = (scroll / 300)
    });
</script>