Skip to content

Instantly share code, notes, and snippets.

@w3collective

w3collective/tailwind-responsive-navbar.html

Last active September 9, 2023 00:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save w3collective/516123bb36c4b8333235d9eed88c1457 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save w3collective/516123bb36c4b8333235d9eed88c1457 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive navbar component with Tailwind CSS
Raw
tailwind-responsive-navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Style a responsive navbar component with Tailwind CSS</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body>
<nav class="flex flex-wrap items-center justify-between p-5 bg-blue-200">
<img src="http://acmelogos.com/images/logo-1.svg" alt="ACME" width="120" />
<div class="flex md:hidden">
<button id="hamburger">
<img class="toggle block" src="https://img.icons8.com/fluent-systems-regular/2x/menu-squared-2.png" width="40" height="40" />
<img class="toggle hidden" src="https://img.icons8.com/fluent-systems-regular/2x/close-window.png" width="40" height="40" />
</button>
</div>
<div class="toggle hidden w-full md:w-auto md:flex text-right text-bold mt-5 md:mt-0 border-t-2 border-blue-900 md:border-none">
<a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Home</a>
<a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Products</a>
<a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Pricing</a>
<a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Contact</a>
</div>
<a href="#" class="toggle hidden md:flex w-full md:w-auto px-4 py-2 text-right bg-blue-900 hover:bg-blue-500 text-white md:rounded">Create Account</a>
</nav>
<script>
document.getElementById("hamburger").onclick = function toggleMenu() {
const navToggle = document.getElementsByClassName("toggle");
for (let i = 0; i < navToggle.length; i++) {
navToggle.item(i).classList.toggle("hidden");
}
};
</script>
</body>
</html>
@w3collective

w3collective commented Apr 27, 2021

Copy link
Copy Markdown
Author

great job!!
above code works with minor modifications.
<script src="script.js"></script> at the tail of body should replace by script in the head

You are correct, thanks for letting me know about the error. Gist has been updated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment