my_header_snippet.php

<!-- header -->
			<header id="header" class="relative bg-white" role="banner">

                <!-- header container -->
                <ul :class="{ 'h-20': !open, 'h-60': open }" class="w-full flex items-center flex-col lg:flex-row py-3 text-gray-900 lg:px-0 px-3 lg:h-auto overflow-hidden duration-300 relative float-center">

                    <li class="block lg:w-1/5 lg:pt-4 text-center order-2 lg:order-1 flex-shrink-0">
                        <a href="/" class="text-xl font-medium py-1 block">Blog</a>
                    </li>
                    <li class="block lg:w-1/5 lg:pt-4 text-center order-3 lg:order-2 flex-shrink-0">
                        <a href="/" class="text-xl font-medium py-1 block">Projects</a>
                    </li>

                    <!-- brand -->
                    <li class="logo py-3 w-full flex items-center justify-between lg:justify-center lg:w-1/5 order-1 lg:order-3 flex-shrink-0">
                        <a class="font-black text-xl text-gray-900 hover:opacity-75 flex items-center lg:flex-col" href="<?php echo home_url(); ?>">
                            <svg class="h-10 fill-current mr-3 text-indigo-600" viewBox="0 0 84 84" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M66.667 8.333h16.666v62.5c0 6.858-5.642 12.5-12.5 12.5H12.5c-6.857 0-12.5-5.642-12.5-12.5V0h66.667v8.333zm0 8.334v54.166c0 2.286 1.881 4.167 4.166 4.167C73.119 75 75 73.119 75 70.833V16.667h-8.333zM8.333 8.333v62.5C8.333 73.119 10.214 75 12.5 75h46.542a12.425 12.425 0 01-.709-4.167v-62.5h-50zm8.334 33.334H50V50H16.667v-8.333zm0 16.666H50v8.334H16.667v-8.334zm0-41.666H50v16.666H16.667V16.667z" fill-rule="nonzero"/></svg>
                            <span class="lg:pt-1">JSHCoder</span>
                        </a>
                        <a class="cursor-pointer block lg:hidden" @click="toggleMenu()">
                            <svg class="h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="heroicon-ui" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/></svg>
                        </a>
                    </li>
                    <!-- /logo -->

                    <li class="block lg:w-1/5 lg:pt-4 text-center order-4 lg:order-4 flex-shrink-0">
                        <a href="/" class="text-xl font-medium py-1 block">Portfolio</a>
                    </li>
                    <li class="block lg:w-1/5 lg:pt-4 text-center order-5 lg:order-5 flex-shrink-0">
                        <a href="/" class="text-xl font-medium py-1 block">About</a>
                    </li>

                </ul>


			</header>
			<!-- /header -->