This basic example shows you how we create a responsive header menu in tailwind css.
First, the html:
<header role="banner" class="px-0 mx-0 container mx-auto pt-6 mb-6 flex flex-col justify-center">
<div class="flex flex-wrap lg:px-4">
<div class="my-2 pr-2 w-5/12 lg:w-3/12 overflow-hidden">
<div class="ml-4 lg:ml-0">
<a href="/">
<img class="md:pl-6" src="https://pngimage.net/wp-content/uploads/2019/05/fake-logo-png-.png" />
</a>
</div>
</div>
<div class="w-5/12 lg:hidden"></div>
<div class="my-2 px-2 w-2/12 lg:hidden flex flex-row">
<div class="self-center block mr-4 w-full">
<button id="nav-toggle" class="text-first" aria-haspopup="true" aria-expanded="false" aria-controls="menu" aria-label="Navigation">
<img class="open w-1/2 align-end" src="https://www.flaticon.com/svg/static/icons/svg/1828/1828859.svg" />
<img class="close hidden w-1/2" src="https://www.flaticon.com/svg/static/icons/svg/61/61155.svg" />
</button>
</div>
</div>
<div class="lg:w-1/12 hidden lg:block"></div>
<div class="w-full lg:w-8/12 hidden lg:block bg-black lg:bg-white mt-4 lg:mt-0 lg:text-right" id="nav-content" aria-expanded="false">
<div class="px-6 lg:px-0 lg:pt-5 xl:pt-7">
<div>
<nav role="navigation" aria-labelledby="block-main-menu" id="block-main">
<ul class="list-reset lg:flex justify-end flex-1 items-center">
<li class="inline-block w-full text-xl lg:text-base font-semibold no-underline py-2 lg:px-4">
<a href="/" class="text-white lg:text-black no-underline is-active">Home</a>
</li>
<li class="inline-block w-full text-xl lg:text-base font-semibold no-underline py-2 lg:px-4">
<a href="/page-2" class="text-white lg:text-black no-underline">Page 2</a>
</li>
<li class="inline-block w-full text-xl lg:text-base font-semibold no-underline py-2 lg:px-4">
<a href="/page-2" class="text-white lg:text-black no-underline is-active">Page 3</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
Second, add this little CSS:
/** Mobile nav **/
#nav-content[aria-expanded="true"] {
display: block;
}
#nav-toggle[aria-expanded="true"] .close {
display:inline-block;
}
#nav-toggle[aria-expanded="true"] .open {
display:none;
}
To make the hamburger work, a little jquery is needed:
// Mobile filter collapse
var isMenuOpen = false;
$('#nav-toggle').click(function() {
isMenuOpen = !isMenuOpen;
$(this).attr('aria-expanded', isMenuOpen);
$('#nav-content').attr('aria-expanded', isMenuOpen);
});
There you go. Preview it on https://tailwind.run/new to see it in action!