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
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save w3collective/516123bb36c4b8333235d9eed88c1457 to your computer and use it in GitHub Desktop.
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>
@JaosnHsieh
Copy link

JaosnHsieh commented Apr 27, 2021 •
edited

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

@w3collective
Copy link
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