Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive navbar component with Tailwind CSS
<!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
Copy link
Author

w3collective commented Feb 3, 2021

@JaosnHsieh
Copy link

JaosnHsieh commented Apr 27, 2021

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

w3collective commented Apr 27, 2021

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